前端項目中，經(jīng)常需要從外引入一些icon圖標(biāo)到項目中，我經(jīng)常使用的兩個icon庫就是Iconfont阿里巴巴矢量庫障贸，以及font-Awsome错森。接下來我稍微講一下這兩種的使用方法。
Iconfont阿里巴巴矢量庫的使用
使用步驟：
先看一下gif圖吧篮洁，如果看懂了略過步驟涩维，直接看一下怎么引入
test.gif
1 進(jìn)入網(wǎng)站之后，搜索想要的icon圖標(biāo)
2 選擇所需要的所有icon添加入庫袁波，可以點擊上方的庫存瓦阐，將所有icon添加到某個項目
3 在我的項目中，選擇剛剛添加的項目篷牌，然后點擊fontClass即可
4 引入圖標(biāo)：將生成的CSS的鏈接地址引入前端樣式
<link rel="stylesheet" >
5 在頁面中引用進(jìn)來
<i class="iconfont icon-cry" ></i> // 其中icon-cry就是從阿里icon上面復(fù)制下來的代碼
切記垄分，就是你每次重新添加或者刪除這個項目中的圖標(biāo)之后，都應(yīng)該重新將生成的CSS代碼地址重新更新刷新娃磺，如下所示， 然后引入的地址重新更改才有效哦叫倍。
image.png
fontAwsome的使用
1 直接進(jìn)入官網(wǎng)偷卧，將icon文件下載下來
image.png
2 然后一般下載下來的文件夾內(nèi)有這么幾個文件，只要保存font 和 css兩個文件夾就可以
image.png
3 然后將這個文件引入
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.css">
4使用
<i class="fa fa-address-book" aria-hidden="true"></i>
嗯好啦吆倦，我覺得icon font基本就可以滿足我的基本需求了听诸，而且不用下載文件到本地，當(dāng)然你也可以下載像fontawsome那么使用蚕泽，但是我覺得iconfont那樣的使用方式就已經(jīng)很方便了晌梨。
