這篇文章主要為大家展示了“如何制作和使用css字體圖標(biāo)”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何制作和使用css字體圖標(biāo)”這篇文章吧。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供瑞麗企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、H5場景定制、小程序制作等業(yè)務(wù)。10年已為瑞麗眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

css字體圖標(biāo)的制作和使用

在項目開發(fā)的過程中，我們會經(jīng)常用到一些圖標(biāo)。但是我們在使用這些圖標(biāo)時，往往會遇到失真的情況，而且圖片數(shù)量很多的話，頁面加載就越慢。所以，我們可以使用字體圖標(biāo)的方式來顯示圖標(biāo)，既解決了失真的問題，也解決了圖片占用資源的問題。

一、如何制作字體圖標(biāo)

1、上網(wǎng)下載需要的圖標(biāo)（svg格式）,在這里推薦一個網(wǎng)站 "阿里巴巴圖標(biāo)庫",這里面幾乎囊括了網(wǎng)站制作中所有需要的圖標(biāo)，而且是免費下載，（格式，大小，顏色都可以自定義）。

阿里巴巴圖標(biāo)庫的地址：https://www.iconfont.cn/

2、我們打開“iconmoon”這個網(wǎng)站（當(dāng)然阿里巴巴圖標(biāo)庫這個網(wǎng)站也可以制作）

https://icomoon.io/

找到右上角這個紅色的按鈕，點擊它

3、找到左上角這個按鈕，點擊import icons這個按鈕，上傳你的svg格式的圖標(biāo)。

4、當(dāng)圖標(biāo)上傳完后，圖標(biāo)的背景是灰色的，這個時候點擊你需要的圖標(biāo)（選中后的背景會變白）。

5、點擊頁面右下角的

這個按鈕，跳轉(zhuǎn)頁面后，再點擊

這個下載按鈕，等待下載完成。

二、如何使用字體圖標(biāo)

1、解壓下載后的文件夾，我們需要的是fonts文件夾和style.css, 將這個文件放入你的項目中,style.css文件中引入了字體文件，所以會有路徑，這個時候你在使用的時候要注意路徑問題，代碼如下：（這里的多種字體文件是為了兼容瀏覽器）

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?snsrp8');
  src:  url('../fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?snsrp8') format('truetype'),
    url('../fonts/icomoon.woff?snsrp8') format('woff'),
    url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

2、在頁面中，我們只要給一個元素添加相應(yīng)的類名就行，因為在style.css中已經(jīng)將類名對應(yīng)的圖標(biāo)寫好了。

.icon-account:before {
content: "\e900";
}
.icon-caifu:before {
content: "\e901";
}
.icon-edit:before {
content: "\e902";
}

頁面中添加如下類似元素：

這樣，我們的頁面中就可以顯示相應(yīng)的圖標(biāo)了。

注意：在某些小米手機上可能有些圖標(biāo)不會顯示：

二：使用阿里的iconfont：

1、找到網(wǎng)站，搜索需要的圖標(biāo)

2、將圖片加入購物車，點擊頁面右上角的購物車按鈕，將所有圖標(biāo)添加到自定義項目中。

3、在彈出的頁面中，點擊下載至本地。

以上是“如何制作和使用css字體圖標(biāo)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！