一直以來硼控，我們公司都在使用圖庫 Iconfont，沒有 UI 設計師的時候，直接從上面下載矢量圖或者 PNG 格式的圖片配合開發(fā)机打。
Ant Design 中 Icon 組件為我們內置了常用的管理系統(tǒng)后臺的圖標蓬坡。下圖就是官網(wǎng)展示的圖標猿棉，能滿足許多項目的使用。
使用也非常簡單屑咳，引入安裝 antd 組件庫萨赁，直接復制圖標的代碼就可以使用。
<Icon type="question" style={{ fontSize: 16, color: '#08c' }} />
| 參數(shù) | 說明 | 類型 | 默認值 |
|---|---|---|---|
| spin | 是否有旋轉動畫 | boolean | false |
| style | 設置圖標的樣式兆龙，例如fontSize 和 color | object | - |
| type | 圖標類型 | string | - |
同時杖爽，我們很快就會發(fā)現(xiàn)，這里的圖標可能不太符合我們的產(chǎn)品要求紫皇。后來慰安，我才發(fā)現(xiàn)通過 Iconfont 可以實現(xiàn)圖標的拓展，具體的步驟如下.
-
登錄
Iconfont 官網(wǎng)坝橡，建議使用 github 直接登錄泻帮，省了許多麻煩。
-
點擊頁面上方的圖標管理计寇。
圖標管理.jpg
-
新建一個項目锣杂。
新建項目.jpg
-
尋找合適的圖標，收藏到購物車里番宁，打開購物車可以看到
添加至項目元莫，點擊后便可以將購物車里的圖標變成私有項目里的圖標。
-
這時再打開
我的項目蝶押，就可以看到添加進來的圖 unicode 引用踱蠢、font-class 引用、symbol 引用。Ant Design 使用的方式就是 unicode 引用茎截。
union代碼.jpg6.最后苇侵，在項目中引入這些圖標的代碼就可以隨心所欲地更改大小、顏色企锌、旋轉角度等字體屬性了榆浓。
unicode是字體在網(wǎng)頁端最原始的應用方式，特點是：
兼容性最好撕攒，支持ie6+陡鹃，及所有現(xiàn)代瀏覽器。 支持按字體的方式去動態(tài)調整圖標大小抖坪，顏色等等萍鲸。 但是因為是字體擦俐，所以不支持多色。只能使用平臺里單色的圖標蹬叭，就算項目里有多色圖標也會自動去色状知。 注意：新版iconfont支持多色圖標，這些多色圖標在unicode模式下將不能使用坦喘，如果有需求建議使用symbol的引用方式
unicode使用步驟如下：
第一步：拷貝項目下面生成的 font-face瓣铣，放到 iconfont.css 文件中
@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }第二步：定義使用 iconfont 的樣式贷揽，也在 iconfont.css 文件中
.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;}第三步：挑選相應圖標并獲取字體編碼禽绪，應用于頁面
<i class="iconfont">3</i>
