在項目中在線使用Iconfont圖標


Iconfont真的很強大,圖標數量驚人,基本任意的關鍵詞都能搜索到你想要的結果。而且是國產的,網速會比較快,還可以改變圖標顏色。

它提供svg、png、ai三種格式下載,之前我一直都是乖乖的一個個下載,最近才發現了新大陸,它竟然可以制作字體圖標,簡直不要太好用!后悔沒有早點發現!

以下內容摘自官網:

font-class引用


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

與unicode使用方式相比,具有如下特點:

  • 兼容性良好,支持ie8+,及所有現代瀏覽器。
  • 相比於unicode語意明確,書寫更直觀。可以很容易分辨這個icon是什么。
  • 因為使用class來定義圖標,所以當要替換圖標時,只需要修改class里面的unicode引用。
  • 不過因為本質上還是使用的字體,所以多色圖標還是不支持的。

 

具體詳細步驟如下:

1、首先找到你需要的小圖標,點擊加入購物車

 

 2、把所有的你需要的圖標添加完后,點擊添加至項目

 

沒有項目的話新建一個

 

 

3、會自動進入我的項目,上邊有一個查看在線鏈接的按鈕,點擊后可以看到

//at.alicdn.com/t/font_1518420_q2w4393r9xr.css這樣一段代碼

 

 

 4、把這段代碼復制進你的項目里(注意在前邊加上http:)如下

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_q2w4393r9xr.css">

 

 5、接下來就可以開心的使用了,在你需要圖標的地方寫入代碼,復制你想要的圖標代碼粘貼進類名里(注意前邊要加上icon iconfont類名)

還可以對圖標進行修改

 

注意:項目圖標增加或者編輯后要注意更新鏈接,並把更新后的鏈接添加進你的項目里!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM