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

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

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

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

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

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

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

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

https://icomoon.io/

找到右上角這個(gè)紅色的按鈕，點(diǎn)擊它

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

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

5、點(diǎn)擊頁面右下角的

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

這個(gè)下載按鈕，等待下載完成。

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

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

@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、在頁面中，我們只要給一個(gè)元素添加相應(yīng)的類名就行，因?yàn)樵?code>style.css中已經(jīng)將類名對應(yīng)的圖標(biāo)寫好了。

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

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

<span class="icon-account"></span>

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

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

二：使用阿里的iconfont：

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

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

3、在彈出的頁面中，點(diǎn)擊下載至本地。

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

網(wǎng)頁名稱：如何制作和使用css字體圖標(biāo)
本文URL：http://aaarwkj.com/article26/jjjdjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、微信公眾號、網(wǎng)站導(dǎo)航、做網(wǎng)站、網(wǎng)站營銷、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)