web icon小圖標字體

　　相信大家在很多網站都已經看到icon小圖標被大量使用，那么icon小圖標是怎么做成的呢，下面就稍微描述一下，多余的話就不說了，直奔主題吧。

　　icon小圖標現在基本上有三種方式：

一、css sprite

也叫css雪碧或者css精靈，這種方法主要是用背景定位和背景圖片，網上太多關於css sprite的文章，我就不細說了。

二、icon font+html

這種方法新浪博客和淘寶網易都有使用

看下面兩張圖的對比，這是新浪微博的主頁，第一張圖首頁圖標是一個房子，第二張圖我注釋掉font-family屬性之后首頁圖標變成了html文件中的字母 E，這個就使用到了web字體圖標。

 

那么怎么制作web字體圖標呢，首先向大家推薦一個網站：https://icomoon.io

我們可以使用這個網站很輕松的就能制作出字體圖標，使用方法http://isux.tencent.com/icon-font.html這個網站已經說的很清楚了，大家可以參考。

主要就是導入svg格式的圖片，選中，然后download下來就可以了，download下來之后會生成一個壓縮包，解壓之后大家可以看見一個demo.html文件，用瀏覽器打開就能看見你的字體圖標。

然后在你的項目中使用時只需要新建一個標簽對然后copy demo里的十六進制代碼到你的標簽對里面，並且在前面加上&#x

eg:

<span>&#xdfadf</span>

 

其他字體圖標網站推薦：http://www.fontello.com/ 、 阿里巴巴的字體圖標庫http://www.fontello.com/

使用方法：用字體在網頁中畫icon小圖標

其他參考資料推薦：如何把圖標轉換成字體

視頻：http://www.imooc.com/learn/243

三、icon font+css

這種方法和第二種大體是差不多的，只不過把寫在html文件中這種字符&#xdfadf利用 :afte r或者 :before 偽元素寫在.css文件中。

這個.css文件是可以通過制作web字體圖標的網站自動生成的。例如：如果你用的是https://icomoon.io這個網站制作的話，下載下來的文件包里面就有一個iconmoon.css的樣式文件，你只需要在一個空的html標簽上使用這個class名，並且在樣式文件中正確的引入了fonts文件，就可以使用了。是不是比第二種方法省時很多呢？

這里需要特別指出的是，download下來的壓縮包，里面的樣式文件對fonts文件的引入是根據他自己的目錄結構寫的url，所以引入到你自己的項目中的時候，需要在iconfont.css文件中修改正確的文件路徑。

以下代碼中加下划線的就是相應的字體文件，為了兼容不同的瀏覽器，所以有多個格式的字體文件。

@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}