什么是iconfont?
以前在做項目的時候經(jīng)常使用到圖片資源逗噩，哪怕是一個勾或者叉都要加載圖片掉丽，最早是一張一張加載跌榔，后來有了雪碧圖，但是這仍然會使得瀏覽器在加載前端代碼時消耗時間去加載圖片捶障。隨著社會的進步僧须，就有了如今的iconfont，簡單來說项炼，就是用文字代替圖片担平，減少圖片資源請求，增加加載速度《Р浚現(xiàn)在暂论，當你要使用一些簡單的圖標時娄琉，請使用iconfont示辈。
iconfont好在哪里？
兼容性好
資源占用小匪蟀，加載速度比圖片快
只需要更改文字顏色就可以更改圖標顏色湃窍，無需多種顏色的圖片
如何使用iconfont闻蛀？
-
iconfont和css關(guān)系十分緊密，在使用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的方式或轉(zhuǎn)義字符的方式來生效/* class的方式 */ .icon-fenxiang:before { content: "\e600"; } <span class="test_icon_font icon-fenxiang"></span> /* 轉(zhuǎn)義字符的方式 */ <span class="test_icon_font"></span>
阿里iconfont
在 阿里 icon-fonts 里新建一個項目觉痛，到 官方素材庫 或者 第三方素材庫 中把想要的素材添加到自己的項目中，項目會自動生成在線代碼茵休，也可以將資源下載到本地使用薪棒。建議使用在線資源手蝎，更改靈活。
