什么是iconfont?
以前在做項目的時候經常使用到圖片資源，哪怕是一個勾或者叉都要加載圖片，最早是一張一張加載，后來有了雪碧圖，但是這仍然會使得瀏覽器在加載前端代碼時消耗時間去加載圖片。隨著社會的進步，就有了如今的iconfont，簡單來說，就是用文字代替圖片，減少圖片資源請求，增加加載速度。現在，當你要使用一些簡單的圖標時，請使用iconfont。
iconfont好在哪里？
兼容性好
資源占用小，加載速度比圖片快
只需要更改文字顏色就可以更改圖標顏色，無需多種顏色的圖片
如何使用iconfont？
-
iconfont和css關系十分緊密，在使用iconfont是我們先要使用
@font-face定義一個字體（注：此處使用在線的字體，也可以下載到本地引用）@font-face { font-family: 'ifont'; src: url('//at.alicdn.com/t/font_430301_89c468mvutur3sor.eot'); src: url('//at.alicdn.com/t/font_430301_89c468mvutur3sor.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_430301_89c468mvutur3sor.woff') format('woff'), url('//at.alicdn.com/t/font_430301_89c468mvutur3sor.ttf') format('truetype'), url('//at.alicdn.com/t/font_430301_89c468mvutur3sor.svg#iconfont') format('svg'); } -
然后定義一個字體類
.test_icon_font { font-family: "ifont" !important; } -
最后可以通過
class的方式或轉義字符的方式來生效/* class的方式 */ .icon-fenxiang:before { content: "\e600"; } <span class="test_icon_font icon-fenxiang"></span> /* 轉義字符的方式 */ <span class="test_icon_font"></span>
阿里iconfont
在 阿里 icon-fonts 里新建一個項目，到 官方素材庫 或者 第三方素材庫 中把想要的素材添加到自己的項目中，項目會自動生成在線代碼，也可以將資源下載到本地使用。建議使用在線資源，更改靈活。
