iconfont用法詳解

iconfont可以極大的提高了開發效率，使用過它的前端人員，估計絕大多數有類似體會。

豐富的內容，在很大程度上能夠滿足實際需求，免去了圖示定製的辛苦，同時圖示的使用也非常方便。

在iconfont官網，你既可以作為圖示的提供人員，也可以作為單純的使用人員，當然也可以兩者兼備。

本文以單純使用人員的身份介紹一下如何使用iconfont，非常的簡單，應該比初次使用智慧手機還要簡單。

並且一旦入門，就會強烈的感受到它的便利性，一發不可自拔，也許說的有些誇張，不過本文作者確實這種感受。

下面分步為初次使用者介紹一下它的應用流程，希望能夠對需要的朋友有所幫助。

一.在官網註冊賬號：

首先要登入iconfont官網，地址是https://www.iconfont.cn/。

註冊賬號並登入，這個操作沒有人不會，簡單圖示如下：

二.選擇中意的圖示：

根據自己的需求選擇需要的圖示，假設我們需要小電腦的圖示。

那麼可以在搜尋框進行搜尋，結果圖示如下：

上面是搜尋結果，資源很豐富，上面只是一小部分截圖。

滑鼠懸浮於對應的圖示智商，會彈出一個選單，圖示如下：

從上到下分別是新增入庫、加入收藏和下載，分別解釋如下：

（1）.新增入庫：選擇新增入庫後，會被包含與下載程式碼之中，後面還會介紹。

（2）.加入收藏：這個很容易理解，收藏起來以備後續使用。

（3）.下載：就是將當前圖示下載到當前客戶端，點選後會彈出多個選項，根據自己的需要選擇。

三.下載：

此時我們已經收藏了若干圖示供我們備選，和其他商城的收藏功能相同，收藏只是用於備選。

現在滑鼠懸浮於頂部導航欄的"圖示管理"選單（當然隨時時間的他推移，UI可能會發生改變），彈出如下選單：

點選我的收藏會進入看到你所有收藏的圖示，將真正需要的圖示新增入庫（滑鼠懸浮圖示之上會有提示）。

新增入庫的圖示會被下載到本地，在網站右上方會有提示：

上面顯示的是已經入庫的圖示數量，點選此圖示，在側欄展開下載操作介面。

根據自己的需要進行不同的操作，比如選擇"下載程式碼"選項，會將入庫的圖示和相應的配套的東西下載到本地。

在本地會看到一個資料夾，截圖如下：

開啟demo_index.html頁面，上面有很詳細的使用說明，非常的簡單。

應該不用再多說了，只要智商正常的朋友都能夠很輕鬆的看懂，並加以利用。