什么是iconfont?

以前在做項(xiàng)目的時(shí)候經(jīng)常使用到圖片資源，哪怕是一個(gè)勾或者叉都要加載圖片，最早是一張一張加載，后來(lái)有了雪碧圖，但是這仍然會(huì)使得瀏覽器在加載前端代碼時(shí)消耗時(shí)間去加載圖片。隨著社會(huì)的進(jìn)步，就有了如今的iconfont，簡(jiǎn)單來(lái)說(shuō)，就是用文字代替圖片，減少圖片資源請(qǐng)求，增加加載速度。現(xiàn)在，當(dāng)你要使用一些簡(jiǎn)單的圖標(biāo)時(shí)，請(qǐng)使用iconfont。

iconfont好在哪里？

• 兼容性好

• 資源占用小，加載速度比圖片快

• 只需要更改文字顏色就可以更改圖標(biāo)顏色，無(wú)需多種顏色的圖片

如何使用iconfont？

• iconfont和css關(guān)系十分緊密，在使用iconfont是我們先要使用 @font-face 定義一個(gè)字體（注：此處使用在線的字體，也可以下載到本地引用）

  @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');
  }
  

• 然后定義一個(gè)字體類(lèi)

  .test_icon_font {
      font-family: "ifont" !important;
  }
  

• 最后可以通過(guò) class的方式 或 轉(zhuǎn)義字符的方式 來(lái)生效

  /* class的方式 */
  .icon-fenxiang:before {
      content: "\e600";
  }
  
  <span class="test_icon_font icon-fenxiang"></span>
  
  /* 轉(zhuǎn)義字符的方式 */
  <span class="test_icon_font">&#xe627;</span>
  

阿里iconfont

在 阿里 icon-fonts 里新建一個(gè)項(xiàng)目，到 官方素材庫(kù) 或者 第三方素材庫(kù) 中把想要的素材添加到自己的項(xiàng)目中，項(xiàng)目會(huì)自動(dòng)生成在線代碼，也可以將資源下載到本地使用。建議使用在線資源，更改靈活。