9012年了你还在用单色图标?(iconfont多色图标详解)

前言

记录iconfont的三种使用方式
多色图标出来已经很久了,现在才拿出来说貌似有点过时…
但为了方便自己以后知道怎么使用,也为了让更多刚入门的新手熟悉iconfont,还是决定写一篇比较详细的文章来记录它的使用方式。
本文主要是参考花叔的文章:手摸手,带你优雅的使用 icon

前期准备

iconfont
)官网上创建一个自己的账号,并创建一个项目。在官网上挑选响应的图标添加进项目中。比如我这里有一个名为vuepress-bolg的项目,添加了一个github的图标。
image.png

unicode

最基础的一种使用方式,就是使用unicode
它的主要优点是:

  • 兼容性最好,支持ie6+
  • 支持按字体的方式去动态调整图标大小,颜色等等
    但是缺点也很明显:
  • 不支持多色图标
  • 在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
    第一步
    在你项目的css中引入字体
    如果你的项目是使用像vue这样的前端框架开发的话,你可以在公共的css中引入它:
    比如我的vue项目下有一个common.css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 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

1
<i class="icon-online">&#xe68c;</i>

创建一个i标签,然后给它设置class,之后在标签中写上你要使用的字体的代码。这样在页面上显示的就是你在对应的图标啦。
可以看到上面的这种unicode有一个很大的弊端,就是你看到代码里的这串&#xe68c;,根本不知道它是个什么图标,需要打开iconfont在你的项目上找对应的代码才知道。所以有了另一种font-class的方式。

font-class

第二种方式就是使用font-class
它的优点是:

  • 兼容性良好,支持ie8+
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
    第一步
    找到iconfont项目下的Font class,并复制它:
    fontClass
    然后在css中引用:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /* 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啦:

1
<i class="icon-online icon-github"></i>

注意⚠️
不过你的前端项目要是用到了多组iconfont,一定要主要命名空间的问题。

不管是unicode还是font-class都只支持单色的图标,设置了iconfonti标签其实就相当于一个字了,也就是可以根据color来控制它的字体颜色。但是你并不能使用多色。

symbol

随着IE慢慢的退出历史舞台,svg-icon使用形式慢慢成为主流和推荐的方法。
它主要有一下几个优点

  • 支持多色图标了,不再受单色限制。
  • 支持像字体那样通过font-size,color来调整样式。
  • 支持 ie9+
  • 可利用CSS实现动画。
  • 减少HTTP请求。
  • 矢量,缩放不失真
  • 可以很精细的控制SVG图标的每一部分
    使用方式:
    第一步
    引入js
    引入的方式有两种:
  1. iconfont的项目里,点击下载至本地,它会把这个项目相关的字体文件都下载下来。找到下载下来里面的iconfont.js文件,把它拷贝到你的前端项目里(只需要拷贝这一个文件就可以了),然后在前端代码里引用这个js:

    1
    <script src="./iconfont.js"></script>
  2. 远程引入,不需要下载这个iconfont.js,而是直接用iconfont项目里生成的那个地址:

    1
    <script src="//at.alicdn.com/t/font_872514_urq1z9ughp.js"></script>

第二步
设置通用的类名

1
2
3
4
5
6
7
/* common.css */
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

第三步
挑选相应图标并获取类名,应用于页面:

1
2
3
4
5
<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|这些字体库的,也就是上面的uniconfont-class两步都可以省去。

现在你可以去iconfont彩色图标库挑选你想要的彩色图标应用在页面中啦。

创建公共的多色图标组件

完成上面的第三步,你已经可以在项目中使用多色的图标了。
但是作为一个有”追求”的前端,怎么能允许在每次要用到图标的时候就写那么一长串的html标签呢。我相信,你首先想到的就是把它封装成一个组件。(如果你真的想到了,恭喜你,和我心有灵犀🧡)
下面以在vue中创建多色图标组件为例:
第一步

创建IconSvg组件

首先在你的组件文件夹中创建一个IconSvg.vue文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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文件夹,文件夹目录为:

1
2
3
4
5
|-src
|-components
|-GlobalComponent
|-index.js
|-IconSvg.vue

然后在index.js中,将其注册为全局组件:

1
2
3
4
5
// 存放一些全局的组件
import Vue from 'vue'
import IconSvg from './components/IconSvg'
//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

最后记得在main.js中引入:

1
2
3
4
// main.js
...
import '@components/GlobalComponent' // 全局组件
...

第三步

使用多色图标组件

使用的时候只需要指定对应的font-class就可以了:

1
<icon-svg icon-class="icon-github" />

是不是感觉方便多了呢?
由于icon-svg也是一个组件,所以你还可以给它加上额外的属性,比如:

1
2
3
4
5
6
<icon-svg
class="cur_pointer"
style="font-size: 20px;"
icon-class="icon-github"
title="我是github图标"
/>

但是在使用过程中,我碰到了一个问题。
就是在你想给图标添加一个事件的时候,却是无效的。
比如我先给图标添加一个点击事件:

1
<icon-svg icon-class="icon-github"  @click="onClick"/>

click事件并没有触发。
暂时的解决方案:使用事件修饰符native

1
<icon-svg icon-class="icon-github"  @click.native="onClick"/>

有更好解决方案的大佬请评论区留言,谢谢…

注⚠️
我喜欢使用iconfont的还一个好处是它可以在一个项目中添加多个项目成员,这样在团队进行项目开发的时候是十分方便的。

后语

参考文章:手摸手,带你优雅的使用 icon
知识无价,支持原创

评论