背景

对于前端而言，图标的发展可谓日新月异。从img标签，到雪碧图，再到字体图标，svg，甚至svg也有了类似于雪碧图的方案svg-sprite-loader。雪碧图没有什么好讲的了，只是简单地利用了background-position来做图标定位。今天咱们先聊聊怎么使用字体图标和svg图标。其实字体图标也不陌生了，bootstrap，font-awesome，element-ui等UI库都基本标配了字体图标。

简单说下原理

unicode预留了E000-F8FF范围作为私有保留区域，这个区间的unicode码非常适合做字体图标，前端根据unicode码就能显示对应的图标。

vue项目引入iconfont

1. 在iconfont新建项目

注：这里修正一下，前缀应该是test-icon-。

2. 添加图标至项目

3. 使用iconfont

Unicode方式（不推荐）

在线使用

index.scss中引入在线字体

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

页面中使用

使用时很不友好，使用的是unicode码表示，使用图标还必须去iconfont项目去查询下unicode码。

<template><div><i class="iconfont">&#xe7ee;</i><i class="iconfont">&#xe7ed;</i><i class="iconfont">&#xe7ec;</i><i class="iconfont">&#xe7eb;</i></div>
</template>

效果图如下：

本地使用

有时候网络不是那么给力的，或者是内网环境，那么就不要考虑用在线引用的方式了。

本地使用需要先将字体库下载并放到项目中。

在全局样式文件中定义如下代码

@font-face {font-family: "iconfont";src: url('../fonts/iconfont.eot'); /* IE9*/src: url('../fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */url('../fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('../assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

使用方式

与在线引用方式是一样的，都是使用unicode码去展示图标。
```
<template><i class="iconfont">&#xe7ee;</i>
</template>
```

总结

兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

Font class方式（较友好）

一种更友好的封装，类似于font-awesome，我们只要使用class，就可以调用图标了。其原理就是利用before伪元素来显示图标。

在线使用

超级简单，只要在线生成代码，引用在线的css文件即可使用。

在index.html中引用它。

<link rel="stylesheet" href="//at.alicdn.com/t/font_1261797_48wm20jf8z.css">

项目中就可以使用字体图标了。

<template><i class="iconfont cl-icon-fold"></i><i class="iconfont cl-icon-delete-solid"></i>
</template>

本地使用

与unicode方式类似，下载代码到本地。因为我是用scss管理样式的，需要在下载的代码中提取出关键部分。除了引用字体库，还要将其中的iconfont.css中定义的before伪元素全部复制到自己的scss文件中。

@font-face {font-family: "iconfont";src: url('../fonts/iconfont.eot'); /* IE9*/src: url('../fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */url('../fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('../assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}// 列了一部分举例
.cl-icon-user:before {content: "\e64b";
}.cl-icon-video:before {content: "\e66b";
}.cl-icon-pause:before {content: "\e7bd";
}.cl-icon-orgnazation:before {content: "\e61b";
}

总结

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

建议

由于加了新的图标需要重新在iconfont.cn重新生成代码，所以这种方式也不算很方便，但是相对于unicode还是高级不少。根据我的经验，建议在调试时，不要每次图标更新，就下载到本地更换。应该先使用在线使用的方式，调试完毕确认无误后，再下载到本地使用，这样对于效率提升有很大帮助。

symbol方式（支持多色图标）

svg的symbol提供了类似于雪碧图的功能，让svg的使用变得更简单，也可以满足做图标系统的需求。可以参考张大大博客了解更多关于svg symbol的知识。

在线使用

首先在iconfont项目中选择symbol方式，并在线生成js代码

然后在index.html中引入这个js文件

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

这个js的作用是在文档中生成svg symbol

最后就可以在页面中通过use标签使用svg图标了。xlink:href的值设置为对应的symbol的id即可。

<svg aria-hidden="true"><use xlink:href="#test-icon-word-ext"></use>
</svg>

效果如下：

多色图标还是酷！

本地使用

本地使用也是一样的道理，主要是依赖这个在线生成的js文件，将在线js文件的链接在浏览器空标签中打开，就可以得到其内容，然后复制内容，自己命名一个js文件，并把它放在本地项目静态资源目录下，引用即可。

<script src="./static/js/symbols.js"></script>

图标自动管理（必看）

即使使用了symbol方式，当设计小姐姐新增图标时，我们还是无法避免重新生成图标代码。那么有没有更优雅的解决方案呢？答案是有的。svg-sprite-loader + require.context。

svg-sprite-loader网上已经有太多文章了。

关于require.context，我倒是有一点自己的理解。请查看一张图带你了解webpack的require.context。

总结

支持多色图标了，不再受单色限制。
支持丰富的css属性进行定制。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

首发链接

vue项目中引入iconfont相关推荐

Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...

vue项目中引入iconfont

背景

简单说下原理

vue项目引入iconfont

1. 在iconfont新建项目

2. 添加图标至项目

3. 使用iconfont

Unicode方式（不推荐）

在线使用

本地使用

总结

Font class方式（较友好）

在线使用

本地使用

总结

建议

symbol方式（支持多色图标）

在线使用

本地使用

图标自动管理（必看）

总结

vue项目中引入iconfont相关推荐

最新文章

热门文章