iconfont.cn基本使用
-
登錄iconfont.cn網站，直接使用github賬號即可登錄
-
輸入關鍵字搜索需要的圖標，然后在需要的圖標上點擊'添加入庫'
-
點擊網站右上角的購物車圖標，查看當前已入庫的圖標
-
點擊下方的[添加至項目]按鈕，選擇已存在的項目或即時新建一個項目，然后確定
-
點擊頂部導航菜單的[圖標管理]\[我的項目]，選擇一個項目可查看項目內現有的圖標
-
圖標列表的上方有幾個按鈕，最左邊的按鈕可以選擇以Unicode/Font class/Symbol等方式顯示
-
鼠標指向任意圖標，可以執行復制代碼等相關操作
-
在Font class/Symbol模式中，圖標代碼一般為"icon-{圖標名}"，但是如果同時加入了多個同名的圖標，那么后面加入的同名圖標代碼會以別的規則產生，為了方便在網頁中使用，此時最好用鼠標指向該圖標，編輯圖標，指定一個合適的新代碼(留意：不必輸入icon-)。
以在線鏈接方式使用iconfont圖標
在HTML文件中
- 登錄iconfont網站，選擇相應項目，切換到Font class模式，復制在線鏈接URL
- 在html文件中添加link標簽，引用上一步復制的url(別忘在前面加上"http:")，在需要顯示iconfont圖標的地方寫上
<i class="iconfont icon-{圖標名}"></i>即可。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iconfont example</title> <!--當在iconfont項目中添加/編輯/刪除圖標后，必須更新在線鏈接URL--> <link rel="stylesheet" href="http://at.alicdn.com/t/font_976353_dqgg2ot7ivl.css"> </head> <body> <h1>IconFont 圖標</h1> <p><i class="iconfont icon-verify" style="color:red;"></i>icon-verify</p> <p><i class="iconfont icon-verify" style="color: 'rgba(0,0,0,.25)'"></i>icon-verify</p> </body> </html>
在使用antd組件的項目中
3.9.0版本之后的antd組件要使用iconfont中的圖標非常簡單方便
-
登錄iconfont網站，選擇相應的項目，切換到Symbol模式，點擊[查看在線鏈接]按鈕，復制該鏈接路徑
-
在需要使用iconfont圖標的組件內，添加以下代碼(scriptUrl值為第1步復制的URL)。
const MyIcon = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_xxxx.js', // 在iconfont.cn上生成 });注意：當添加/編輯/刪除圖標后，必須更新在線鏈接URL，然后將scriptUrl替換為新url
-
然后在需要添加圖標的地方，添加與下面類似的代碼即可：
<MyIcon type="icon-{圖標名}"/>
type屬性的值可直接通過在iconfont網站鼠標指向圖標，然后復制代碼獲得。
以離線方式使用iconfont圖標
待寫...