原標題：Iconfont矢量圖標庫在網(wǎng)站中的使用方法

大家都知道現(xiàn)在移動端網(wǎng)站設計比較熱門，由于移動端的網(wǎng)站頁面的收縮性要求很高，必然在網(wǎng)頁設計中，一些小點的圖標，使用圖片收縮性，以及美觀上并不是很理想；下面給大家分享一下iconfont矢量圖標(字體圖標)如何在網(wǎng)頁中使用

如上圖中使用到的都是iconfont圖標，使用起來非常方便，隨時可以自由的修改你想要的大小和顏色等等！

Iconfont是阿里巴巴推出的矢量圖標庫，其中涵蓋了1000多個常用圖標，并在持續(xù)更新中。

iconfont圖標的優(yōu)勢：

自由變化大小(高清屏無壓力)

自由修改顏色(純色)

可以添加一些視覺效果，如：陰影、旋轉、透明度等

iconfont圖標在網(wǎng)站中的使用方法：

在iconfont的官網(wǎng)中調用iconfont圖標的方法很多，在項目中我就常用unicode引用方法，

第一步：拷貝項目下面生成的font-face

第二步：定義使用iconfont的樣式

第三步：挑選相應圖標并獲取字體編碼，應用于頁面

就這簡單的三步就能做出你想要的字體圖標了，但是有很多小伙伴肯定會有疑問還不知如何使用(特別是剛接觸字體圖標的小伙伴)所以今天我還得用一個實例來教大家如何在網(wǎng)頁中顯示字體圖標，官網(wǎng)的知識只能教你如何加載文件而實操的話就得靠自己摸索了！

首先我想做一個底部導航欄，如下(有4個小圖標)

要想展示這些圖標，首先想到的是要去iconfont官網(wǎng)搜索好圖標然后下載到本地文件夾中！

輸入你想要搜索的圖標

比如說搜索“首頁”然后就有很多圖標展示出來，選擇你想要的，然后點擊購物車的圖標添加入庫

選好后到自己的購物車里可以看到如下圖所示，自己就新建一個項目文件用來管理好在哪個項目下的字體圖標

在自己的項目里可以看到添加好的圖標，然后點擊下載至本地，就完成了圖標的下載

在自己的html項目下新建一個font文件夾，用來存放下載下來的字體圖標文件：

在下載好的字體圖標文件中選擇以下4個文件拷貝到html下的font目錄下即可：

現(xiàn)在就可以來定義自己的字體圖標樣式和布局了：

html:

用來裝字體圖標的標簽記得加上類 class="iconfont"才能顯示字體圖標；字體編碼可以到iconfont中你自己新建好的項目里查找

css:

這兩部分記得寫上，如果怕忘記添加，你們可以放在你的公用css樣式里

這樣就可以自定義加載的圖標的大小和顏色了，因為字體圖標就是一個字體，所有可以把它當成是字體那樣調整樣式即可！返回搜狐，查看更多

責任編輯：

總結

以上是生活随笔為你收集整理的矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。