9012年了你還在用單色圖標？(iconfont多色圖標詳解)

前言

記錄iconfont的三種使用方式 多色圖標出來已經好久了，如今纔拿出來講貌似有點過期... 但爲了方便本身之後知道怎麼使用，也爲了讓更多剛入門的新手熟悉iconfont，仍是決定寫一篇比較詳細的文章來記錄它的使用方式。 本文主要是參考花叔的文章：手摸手，帶你優雅的使用 icon

前期準備

在iconfont官網上建立一個本身的帳號，並建立一個項目。在官網上挑選響應的圖標添加進項目中。好比我這裏有一個名爲vuepress-bolg的項目，添加了一個github的圖標。

unicode

最基礎的一種使用方式，就是使用unicode。 它的主要優勢是：

• 兼容性最好，支持ie6+
• 支持按字體的方式去動態調整圖標大小，顏色等等 可是缺點也很明顯：
• 不支持多色圖標
• 在不一樣的設備瀏覽器字體的渲染會略有差異，在不一樣的瀏覽器或系統中對文字的渲染不一樣，其顯示的位置和大小可能會受到font-size、line-height、word-spacing等CSS屬性的影響，並且這種影響調整起來較爲困難 第一步 在你項目的css中引入字體 若是你的項目是使用像vue這樣的前端框架開發的話，你能夠在公共的css中引入它： 好比個人vue項目下有一個common.css:

/* common.css */

@font-face {
  font-family: 'iconfont';  /* project id 872514 */
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot');
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.woff') format('woff'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.svg#iconfont') format('svg');
}
複製代碼

注：上面的內容不是複製個人，而是複製你在iconfont項目上Unicode下的內容。這段代碼的做用是遠程的引入iconfont 字體。你能夠不須要下載到本地。 第二步 定義字體 將字體引入到了項目中的話，你須要定一個類，讓它的字體類型爲iconfont：

/* common.css */

@font-face {
  font-family: 'iconfont';  /* project id 872514 */
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot');
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.woff') format('woff'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.svg#iconfont') format('svg');
}
.icon-online { /* 定義一個類 */
  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;
}
複製代碼

因爲個人字體是遠程引入的，因此這裏我就取名爲icon-online，固然你也可使用其它的命名。 第三步 頁面上使用unicode

<i class="icon-online">&#xe68c;</i>
複製代碼

建立一個i標籤，而後給它設置class，以後在標籤中寫上你要使用的字體的代碼。這樣在頁面上顯示的就是你在對應的圖標啦。 能夠看到上面的這種unicode有一個很大的弊端，就是你看到代碼裏的這串，根本不知道它是個什麼圖標，須要打開iconfont在你的項目上找對應的代碼才知道。因此有了另外一種font-class的方式。

font-class

第二種方式就是使用font-class 它的優勢是：

• 兼容性良好，支持ie8+
• 相比於unicode語意明確，書寫更直觀。能夠很容易分辨這個icon是什麼。 第一步 找到iconfont項目下的Font class,並複製它：

  

  而後在css中引用：

/* common.css */

@import "//at.alicdn.com/t/font_872514_urq1z9ughp.css";
@font-face {
  font-family: 'iconfont';  /* project id 872514 */
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot');
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.woff') format('woff'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.svg#iconfont') format('svg');
}
.icon-online { /* 定義一個類 */
  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;
}
複製代碼

第二步 而後你在使用的時候就能夠將unicode的方式改成font-class啦：

<i class="icon-online icon-github"></i>
複製代碼

注意⚠️： 不過你的前端項目要是用到了多組iconfont，必定要主要命名空間的問題。

不論是unicode仍是font-class都只支持單色的圖標，設置了iconfont的i標籤其實就至關於一個字了，也就是能夠根據color來控制它的字體顏色。可是你並不能使用多色。

symbol

隨着IE慢慢的退出歷史舞臺，svg-icon使用形式慢慢成爲主流和推薦的方法。 它主要有一下幾個優勢：

• 支持多色圖標了，再也不受單色限制。
• 支持像字體那樣經過font-size,color來調整樣式。
• 支持 ie9+
• 可利用CSS實現動畫。
• 減小HTTP請求。
• 矢量，縮放不失真
• 能夠很精細的控制SVG圖標的每一部分 使用方式： 第一步 引入js 引入的方式有兩種：

1. 在iconfont的項目裏，點擊下載至本地，它會把這個項目相關的字體文件都下載下來。找到下載下來裏面的iconfont.js文件，把它拷貝到你的前端項目裏(只須要拷貝這一個文件就能夠了)，而後在前端代碼裏引用這個js:

<script src="./iconfont.js"></script>
複製代碼

2. 遠程引入，不須要下載這個iconfont.js，而是直接用iconfont項目裏生成的那個地址：

<script src="//at.alicdn.com/t/font_872514_urq1z9ughp.js"></script>
複製代碼

第二步 設置通用的類名

/* common.css */
.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
複製代碼

第三步 挑選相應圖標並獲取類名，應用於頁面：

<div>
  <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-github"></use>
  </svg>
</div>
複製代碼

注意⚠️ 在xlink:href="#"後面接的就是你圖標的font-class，好比我這裏github的圖標就是icon-github。前綴icon-並非全部圖標都會有，要根據本身圖標的font-class來填寫它。 另外，使用symbol這種方式是不須要引用woff|eot|ttf|這些字體庫的，也就是上面的unicon和font-class兩步均可以省去。

如今你能夠去iconfont彩色圖標庫挑選你想要的彩色圖標應用在頁面中啦。

建立公共的多色圖標組件

完成上面的第三步，你已經能夠在項目中使用多色的圖標了。 可是做爲一個有"追求"的前端，怎麼能容許在每次要用到圖標的時候就寫那麼一長串的html標籤呢。我相信，你首先想到的就是把它封裝成一個組件。(若是你真的想到了，恭喜你，和我心有靈犀🧡) 下面以在vue中建立多色圖標組件爲例： 第一步

建立IconSvg組件

首先在你的組件文件夾中建立一個IconSvg.vue文件：

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script> export default { name: 'icon-svg', props: { iconClass: { type: String, required: true } }, computed: { iconName() { return `#${this.iconClass}` } } } </script>

<style> .svg-icon { width: 1em; height: 1em; font-size: 18px; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
複製代碼

第二步

註冊爲全局組件

因爲多色圖標可能會在多處使用，因此我建議你將這個組件註冊爲全局的組件。 好比我會在components文件夾下建立一個GlobalComponent文件夾，文件夾目錄爲：

|-src
  |-components
    |-GlobalComponent
      |-index.js
      |-IconSvg.vue
複製代碼

而後在index.js中，將其註冊爲全局組件：

// 存放一些全局的組件
import Vue from 'vue'
import IconSvg from './components/IconSvg'
//全局註冊icon-svg
Vue.component('icon-svg', IconSvg)
複製代碼

最後記得在main.js中引入：

// main.js
...
import '@components/GlobalComponent' // 全局組件
...
複製代碼

第三步

使用多色圖標組件

使用的時候只須要指定對應的font-class就能夠了：

<icon-svg icon-class="icon-github" />
複製代碼

是否是感受方便多了呢？ 因爲icon-svg也是一個組件，因此你還能夠給它加上額外的屬性，好比：

<icon-svg class="cur_pointer" style="font-size: 20px;" icon-class="icon-github" title="我是github圖標" />
複製代碼

可是在使用過程當中，我碰到了一個問題。 就是在你想給圖標添加一個事件的時候，倒是無效的。 好比我先給圖標添加一個點擊事件：

<icon-svg icon-class="icon-github" @click="onClick"/>
複製代碼

click事件並無觸發。 暫時的解決方案：使用事件修飾符native：

<icon-svg icon-class="icon-github" @click.native="onClick"/>
複製代碼

有更好解決方案的大佬請評論區留言，謝謝...

注⚠️ 我喜歡使用iconfont的還一個好處是它能夠在一個項目中添加多個項目成員，這樣在團隊進行項目開發的時候是十分方便的。

微信小程序中使用多色圖標

請參考《微信小程序使用多色圖標詳解》

後語

參考文章：手摸手，帶你優雅的使用 icon

知識無價，支持原創