使用iconfont圖標

時間 2019-11-14

標籤使用 iconfont 圖標简体版

原文原文鏈接

iconfont.cn基本使用

登陸iconfont.cn網站，直接使用github帳號便可登陸css
輸入關鍵字搜索須要的圖標，而後在須要的圖標上點擊'添加入庫'
點擊網站右上角的購物車圖標，查看當前已入庫的圖標
點擊下方的[添加至項目]按鈕，選擇已存在的項目或即時新建一個項目，而後肯定
點擊頂部導航菜單的[圖標管理]\[個人項目]，選擇一個項目可查看項目內現有的圖標
圖標列表的上方有幾個按鈕，最左邊的按鈕能夠選擇以Unicode/Font class/Symbol等方式顯示
鼠標指向任意圖標，能夠執行復制代碼等相關操做
在Font class/Symbol模式中，圖標代碼通常爲"icon-{圖標名}"，可是若是同時加入了多個同名的圖標，那麼後面加入的同名圖標代碼會以別的規則產生，爲了方便在網頁中使用，此時最好用鼠標指向該圖標，編輯圖標，指定一個合適的新代碼(留意：沒必要輸入icon-)。html

以在線連接方式使用iconfont圖標

在HTML文件中

登陸iconfont網站，選擇相應項目，切換到Font class模式，複製在線連接URL

在html文件中添加link標籤，引用上一步複製的url(別忘在前面加上"http:")，在須要顯示iconfont圖標的地方寫上<i class="iconfont icon-{圖標名}"></i>便可。git

<!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中的圖標很是簡單方便github

登陸iconfont網站，選擇相應的項目，切換到Symbol模式，點擊[查看在線連接]按鈕，複製該連接路徑
在須要使用iconfont圖標的組件內，添加如下代碼(scriptUrl值爲第1步複製的URL)。antd
```
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_xxxx.js', // 在iconfont.cn上生成
});
```
注意：當添加/編輯/刪除圖標後，必須更新在線連接URL，而後將scriptUrl替換爲新url網站
而後在須要添加圖標的地方，添加與下面相似的代碼便可：
<MyIcon type="icon-{圖標名}"/>
type屬性的值可直接經過在iconfont網站鼠標指向圖標，而後複製代碼得到。url

以離線方式使用iconfont圖標

待寫...code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。