iconfont的使用

為什么使用iconfont

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

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

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

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

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

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

第一種方法：icon 單個使用

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

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

建議可以使用微博賬號登錄，更方便。

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

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

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

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

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

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

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

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

第二種方法：unicode 引用

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

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

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

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

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

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

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

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

如果是新的文件夾，進(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)簽，然后將對應(yīng)的圖標(biāo)編碼放在里面

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

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

這個時候運(yùn)行出來頁面里面會有問題

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

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

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

第三種方法：font-class 引用

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

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

兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
1.相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
2.因為使用class來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時，只需要修改class里面的unicode引用。
3.不過因為本質(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

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

3.步驟三：點(diǎn)擊復(fù)制代碼，到html中引用代碼

在html中使用link標(biāo)簽引入復(fù)制代碼，注意：由于復(fù)制的代碼地址不完整，需要加上網(wǎng)頁請求頭（http:）

4.鼠標(biāo)移入圖標(biāo)上，點(diǎn)擊復(fù)制代碼；將代碼復(fù)制到html文件中

先復(fù)制圖標(biāo)代碼

在頁面中添加相關(guān)代碼

5.步驟五：刷新頁面得到圖標(biāo)

注意：此方法如果要修改圖標(biāo)大小采用font-size屬性，并要使用！important強(qiáng)制改變

到此這篇關(guān)于iconfont的N種使用方法的文章就介紹到這了,更多相關(guān)iconfont使用方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論