Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。
下面是vue、element-ui项目，如何使用阿里iconfont图标库的方法。
文章图片
image.png 点击紫色按钮创建项目
文章图片
image.png 
文章图片
image.png 图中画红线的地方很重要
1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。
如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来
2）、FontFamily随便起一个名字，你能记住就行
项目创建完了，你可以往项目里面添加自己想要的图标了
文章图片
image.png 
文章图片
image.png 
文章图片
image.png 点击下载至本地后会得到一个压缩包，打开这个压缩包，里面有一些文件是没用的。留着选中的，其他没用的可以删除
文章图片
image.png 【Vue、Element-ui项目中如何使用Iconfont(阿里图标库)】搭建项目
1.在vue-cli、element-ui项目中，src文件夹->assets->文件夹下面创建名字为iconfont的文件夹
2.将上面第六步中画红线的文件拷贝到iconfont文件夹中
文章图片
image.png 3.找到项目中的main.js文件，导入iconfont.css样式
文章图片
image.png 4.打开iconfont.css文件你会看到
文章图片
image.png 上面的是，你创建项目时候定义的字体，下面的是你一会要引入的样式类名（就是你想要的图标）
5.ok我们这回终于可以引用图标了
文章图片
image.png 6.效果展示
文章图片
image.png 7.假如你还想要其他图标，那就继续往里面添加入库，然后下载文件，找到有用的文件复制粘贴到icon文件夹里面来，一定要把之前的替换掉
总结
引入的图标是不是比你平时引入的img高大尚很多，它还可以支持css的语法，文件体积还小，还可以让其不和element-ui图标冲突
我的博客
我的博客
推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明，是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- vue-cli|vue-cli 3.x vue.config.js 配置
- 七老修复好敏感、角质层薄、红血丝
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 2020-04-07vue中Axios的封装和API接口的管理
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。