絕對乾貨！！css3字體圖標—豐富的阿里圖標庫iconfont的使用詳解

在移動端Web項目開發中，咱們每每須要用到一些小圖標，好比搜索，返回，小菜單，小箭頭等等。。這若是還用切圖你就OUT了。。

而這時CSS3提供的字體圖標無疑是咱們最好的選擇，它就像字體同樣，能夠設置大小，顏色等樣式，美滋滋。

而阿里巴巴矢量圖標庫 ，各個設計師們爲咱們製做了海量的小圖標，任君選擇  截至目前2017.12.8日 已經擁有了約185萬個圖標

連接：http://www.iconfont.cn/  

好了，進入正題。

 

第一步：打開上述連接 ，進入圖標庫，哦對了，還得登錄，而後在圖標庫右上方的搜索欄，搜索你的項目須要的、或者你想要的小圖標。

好比我須要  「搜索」、「返回」、「刪除」、「小菜單」這些圖標。那麼在搜索欄輸入一個「返回」，將會出現如下界面

固然。這還只是一部分。5000個返回的小圖標任你選擇。

 

第二步：若是你須要其中一個，鼠標選中，添加入庫。此時，你的購物車中就有了這個小圖標。

而後，你能夠再挑選其餘的 ，跟逛淘寶同樣，把須要的加入你的購物車。

 

 

第三步：你以爲夠了，那麼就能夠結帳了，哈哈哈。打開購物車。選擇下載代碼。

這時，就把你剛纔挑選的字體圖標都下到本地了。

 

 

第四步：解壓文件，獲得如下目錄文件：

這個是iconfont爲咱們打包的一個剛纔的圖標文件    也就是你的快遞到了。能夠打開包裹(demo)看看啊哈哈。

 

第五步：把字體圖標文件放入你的項目目錄。在項目目錄下面建一個fonts文件夾，把上圖的最後5個文件拷貝進去。

第六步：在你的html中引入iconfont.css。而後給須要圖標的地方加一個    <i class="icon iconfont icon-fanhui"></i>     

改一下類名，相信你已經都懂了。。