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

知识无价，支持原创