來自阿里媽媽的iconfont(轉）

轉自http://www.augsky.com/775.html

隨便說說二者的優缺點

其實主要是說iconfont的優勢和Font Awesome的缺點。-_-|||
iconfont的圖標庫至關巨大，我在寫上一篇文章的時候仍是51794個，如今刷新以後圖標數量已是52090個了。若是這麼大的一個庫裏面仍然沒有你須要的圖標的話，你也能夠本身動手製做你本身的圖標而後使用網站的在線生成工具來生成字體文件，分分鐘就能夠使用了。

除了擁有巨大的圖標庫以外，iconfont最值得推薦的緣由還在於她使用上的靈活性（實話說，iconfont給我最初的印象是有點像如今各大運營商主打的可自由搭配的積木套餐），由於她徹底能夠由你自由搭配組合、按需索取。在自定義Walker類給WORDPRESS導航菜單添加ICON字體圖標這篇文章中我就提到過。若是你的網站一共只須要用到5個圖標，那麼你只須要將這5個圖標的字體文件和相關的css下載下來就能夠用了。若是你想使用iconfont的CDN服務的話，你都不用下載，直接將這幾個圖標添加到你本身的項目中，而後在你的網站裏面引用一個CSS文件就能夠了。

再反觀Font Awesome，哪怕你只是要用到2個圖標，你都必需要把全部文件都下載下來才能使用。而上面也說了，僅SVG就194KB大了，還有其餘幾個字體文件加起來一共有400+KB，這仍是沒有算上一樣好幾十KB的CSS文件。

孰優孰劣是否是很清楚？相信你已經有了本身的選擇。

來，下面說說如何使用，其實很簡單，但仍是理一個步驟給不是很懂的同窗。

第一步：將你看上的圖標加入到購物車

官方叫法是「暫存架」，購物車只是個人叫法，好像並不許確，由於不須要花錢的啊，可是它用了一個購物車的圖標，因此暫且這樣稱呼吧。
這裏你能夠在iconfont的圖標庫裏面尋找你要的圖標，可是我不建議你這樣作，由於默認給出的幾個官方圖標庫裏面的圖標是不全的。正確的作法是在導航欄右側的輸入框中輸入關鍵詞來搜索圖標，這樣就會將網友製做的圖標都搜出來。（我一開始就是在圖標庫中找微信、twitter和QQ空間的圖標怎麼也找不到，後來試着在上面搜索了一下，出來大把的，才知道官方庫裏面是沒有收錄這些圖標的。。。）

第二步：存儲爲項目或者下載到本地

就像上面圖片中的那樣，添加到購物車以後就能夠存爲項目或下載到本地，這裏看你的需求了。反正我是想使用阿里的CDN，因此直接存爲項目了。存儲爲項目的時候你能夠選擇存爲新項目仍是添加到已有的項目裏面，肯定以後會跳轉到項目詳情頁。

第三步：下載修改並調用CSS文件

在項目詳情頁裏面你仍是能夠選擇是下載文件到本地使用仍是使用阿里的CDN，固然選擇CDN了（也就是頁面中的獲取在線連接）。這裏建議使用Font Class，由於若是你選擇Unicode的話CSS中圖標的編碼都要本身寫，這個有點麻煩啊，不符合我這種懶鬼的風格，因此若是你也是懶鬼一枚請將下圖中右上角的滑塊滑到右側。

而後鼠標移到左側的獲取在線連接這裏就能看到生成的CSS文件了，你如今有兩個選擇：一是直接調用這個文件，在網站的HTML中修改添加圖標的元素的類爲"iconfont icon-xxx"的；第二個選擇是將這個文件下載下來，而後作一些修改以後傳到服務器本地調用，而後在網站的HTML中修改添加圖標的元素的類爲"icon-xxx"。我選擇的是第二種，你們隨意。
選擇第二種的話須要對CSS作一點小的修改，將選擇器「.iconfont」改成「[class*=icon-],[class^=icon-]」：

1. [class*="icon-"],[class^="icon-"]{
   
2. font-family:"iconfont"!important;
   
3. font-size:16px;
   
4. font-style:normal;
   
5. -webkit-font-smoothing:
   
6. antialiased;
   
7. -webkit-text-stroke-width:0.2px;
   
8. -moz-osx-font-smoothing:grayscale;}

而後引用CSS文件就OK了。

 

第四步：在網頁中使用icon圖標字體

CSS調用以後就能夠在HTML中給元素添加CSS類來顯示圖標了，看下面這張圖，好比我要調用圖片中的小火箭這個圖標，那我就要將個人HTML修改成

1. <i class="icon-xiaohuojian"></i>

這樣既可。

 

wordpress導航欄怎麼使用icon圖標字體能夠看看這篇文章。