快捷導(dǎo)航

iconfont的N種使用方法小結(jié)

更新時(shí)間：2024年01月08日 15:30:02 作者：徐小容

使用iconfont字體圖標(biāo)可以隨意改變大小,避免圖片放大失真問題,但是值得注意,修改字體圖標(biāo)大小的時(shí)候使用font-size屬性,并且顏色可隨意更改,本文給大家介紹iconfont的N種使用方法,感興趣的朋友一起看看吧

iconfont的使用

為什么使用iconfont

1、字體圖標(biāo)可以隨意改變大小，避免圖片放大失真問題，但是值得注意，修改字體圖標(biāo)大小的時(shí)候使用font-size屬性，并且顏色可隨意更改

2、字體圖標(biāo)相比于圖片圖標(biāo)體積更小，所占空間也就更少，對(duì)于微信小程序這種體積不能超過2M的項(xiàng)目來說就特別推薦

3、減少請(qǐng)求次數(shù)，一個(gè)css文件可包含所有的圖標(biāo)，減少大量使用圖片，刷新速度和加載速度更快

5、設(shè)計(jì)不需要提供多個(gè)場(chǎng)景圖標(biāo)，只需要維護(hù)一個(gè)項(xiàng)目圖標(biāo)庫就行，方便開發(fā)者使用，提高開發(fā)效率，降低維護(hù)成本

網(wǎng)頁web開發(fā)使用iconfont的3種方法

使用iconfont有三種方法，一般情況下都使用在線使用，減少代碼量
iconfont官網(wǎng)地址：iconfont官網(wǎng)

第一種方法：icon 單個(gè)使用

對(duì)于剛學(xué)習(xí)網(wǎng)頁開發(fā)的朋友們來說，可以采取這個(gè)方法，將我們的icon圖標(biāo)下載到本地，加入我們的放圖標(biāo)的文件夾，再引用就可以了。我們一起來看看怎么實(shí)現(xiàn)：

1.步驟一：打開iconfont官網(wǎng)，官網(wǎng)的圖標(biāo)我已經(jīng)放在上面了。

建議可以使用微博賬號(hào)登錄，更方便。

2.步驟二，選擇自己需要的圖標(biāo)，比如我找的登錄圖標(biāo)

在主頁的搜索框輸入登錄，然后點(diǎn)擊回車

會(huì)出現(xiàn)我們的搜索結(jié)果，我們可以選擇我們想要的圖標(biāo)，下面有翻頁符號(hào)，可以慢慢尋找自己想要的圖標(biāo)

找到自己需要的圖標(biāo)后，點(diǎn)擊下載

點(diǎn)擊之后會(huì)彈出下載頁面，按自己的需求點(diǎn)擊下載，我這里下載的png格式

將自己下載好的png圖片放到自己需要引入的項(xiàng)目圖片文件夾下面，去到html文件中

相對(duì)路徑的使用：./代表進(jìn)入與當(dāng)前文件路徑一致的文件夾中；…/代表退出當(dāng)前文件目錄進(jìn)入與父級(jí)目錄相同的文件夾中；如果還需要再退到上一級(jí)目錄，則繼續(xù)使用…/來實(shí)現(xiàn)

在瀏覽器中打開，得到如下效果，可以通過我們的CSS樣式對(duì)圖片進(jìn)行操作

第二種方法：unicode 引用

unicode是字體在網(wǎng)頁端最原始的應(yīng)用方式，特點(diǎn)是：

兼容性最好，支持ie6+，及所有現(xiàn)代瀏覽器。
支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等。
但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色。

1.步驟一：在iconfont主頁里面找到自己需要的圖標(biāo)，加入購物車。

我們繼續(xù)選擇剛剛那個(gè)登錄圖標(biāo)，如何搜索，在上一種方法中已經(jīng)講述過了，這里就不再說了

2.步驟二：點(diǎn)擊導(dǎo)航欄上方的購物車圖標(biāo)，然后添加到項(xiàng)目中

也可以一次添加多個(gè)圖標(biāo)

點(diǎn)擊添加項(xiàng)目之后會(huì)有彈窗，選擇項(xiàng)目，再點(diǎn)擊確定，頁面會(huì)自動(dòng)彈到該項(xiàng)目里面

3.步驟三：進(jìn)入項(xiàng)目后

如果是新的文件夾，進(jìn)入頁面之后，需要點(diǎn)擊生成網(wǎng)址代碼

4.步驟四：生成代碼之后，可以復(fù)制代碼到相應(yīng)的CSS文件中

4.步驟四：再定義使用iconfont的樣式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}

5.步驟五：使用自定義的標(biāo)簽，然后將對(duì)應(yīng)的圖標(biāo)編碼放在里面

當(dāng)鼠標(biāo)移入當(dāng)前圖標(biāo)，會(huì)出現(xiàn)一個(gè)蒙版，可以點(diǎn)擊上面的復(fù)制代碼即可

進(jìn)入網(wǎng)頁中是現(xiàn)代代碼

這個(gè)時(shí)候運(yùn)行出來頁面里面會(huì)有問題

原因是因?yàn)?，我在引入?xiàng)目下面生成的font-face時(shí)，里面的URL引入的網(wǎng)頁地址不完整，因此我們要補(bǔ)全地址

再去頁面里面刷新就可以了

注意：如果之后還要去頁面里面添加圖標(biāo)，可以在生成代碼哪里直接更新代碼，再復(fù)制，可以將原本的代碼直接覆蓋掉，避免反復(fù)請(qǐng)求

第三種方法：font-class 引用

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。

與unicode使用方式相比，具有如下特點(diǎn)：

兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
1.相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個(gè)icon是什么。
2.因?yàn)槭褂胏lass來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。
3.不過因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

1.步驟一：這種方法前面的步驟與第二種方法相同，我就不重復(fù)了，從主頁中搜索圖標(biāo)，然后加入購物車，再添加至項(xiàng)目；（這一步不會(huì)的同學(xué)參考第二種方法） 2.步驟二：選擇Font class，然后點(diǎn)擊生成代碼