web icon小圖標字體

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

　　icon小圖標如今基本上有三種方式：

1、css sprite

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

2、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

3、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- */
}