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
搭建项⽬
1.在vue-cli、element-ui项⽬中，src⽂件夹->assets->⽂件夹下⾯创建名字为iconfont的⽂件夹
2.将上⾯第六步中画红线的⽂件拷贝到iconfont⽂件夹中
image.png
3.到项⽬中的main.js⽂件，导⼊iconfont.css样式
icon图标库image.png
4.打开iconfont.css⽂件你会看到
image.png
上⾯的是，你创建项⽬时候定义的字体，下⾯的是你⼀会要引⼊的样式类名（就是你想要的图标）5.ok我们这回终于可以引⽤图标了
image.png
6.效果展⽰
image.png
7.假如你还想要其他图标，那就继续往⾥⾯添加⼊库，然后下载⽂件，到有⽤的⽂件复制粘贴到icon⽂件夹⾥⾯来，⼀定要把之前的替换掉总结
引⼊的图标是不是⽐你平时引⼊的img⾼⼤尚很多，它还可以⽀持css的语法，⽂件体积还⼩，还可以让其不和element-ui图标冲突
我的博客
我的博客

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。