大家好，又见面了，我是你们的朋友全栈君。
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。
2018-11-9更新
VX号: LJT-917
这是我的微信公众号全是技术文章：![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/c251f29c-9e4b-4b8d-9a49-654536b73ed6202204040e6f4379-1e00-419f-bdb6-e32d5e032ae31.jpg)
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤，
a.引入项目生成的，图标地址。
b.使用![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/bbaabc10-bcf3-4758-ac59-20f514985f27202204043bf6a555-c5b4-4c4c-a6e2-8a1dc1568e471.jpg)
推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
2.笨拙式引用：
准备工作
1.![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/142df7b9-7f81-4308-8e76-bce5406e7771202204042ac0e403-8958-41d3-b274-87f10a90bae31.jpg)
先注册，再登录、找到图标管理、我的项目
2.![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/40762a5e-4c2e-4766-9a78-b0cd507d46b72022040412114b3b-f5b5-46a9-ab74-e98c68c160701.jpg)
点紫色的这个创建自己的项目
3.![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/ef544910-d33d-4672-afbb-02ebae569bb5202204044c57603b-92ca-47aa-bc8e-2771c5060f8f1.jpg)
图中画红线的地方很重要
1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。
如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来
2）、FontFamily随便起一个名字，你能记住就行
4.项目创建完了，你可以往项目里面添加自己想要的图标了
1）、比如我想要一个设置的图标
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/01c53ea1-7899-4ed5-bbba-044741559f13202204042bc8af41-5be4-4513-b628-792eb66104291.jpg)
搜索之后能找出来好多不一样的设置图标，找到你想要的图标，点击添加入库，当你点击完之后，购物车会出现你刚才添加入库的数量
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/394ea42f-1617-40fe-b6f8-32a072ff1065202204044da79292-8f0a-463c-b6b3-8f38ccbe7c131.jpg)
点这个购物车
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/f0347e58-a933-4440-be43-b7cc9743fe1820220404514604bf-ff55-4577-b157-34d3de6bb4d51.jpg)
点添加至项目，这时候回弹出来你刚才创建好的项目，选中你刚创建好的项目，在点击下面的确定
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/03c39d52-ab19-437b-aee4-3f0f5195abe82022040426adb41d-0a44-497c-a5b9-587bd5f444e71.jpg)
5、OK!!! 图标添加完毕！！
找到我的项目->你刚才创建的那个项目->点击下载到本地
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/4c9713ed-e8f7-4601-b649-ccb3ebbe94d02022040429a210ee-14b6-4c2a-b5c6-bccfb44041f61.jpg)
6、你会得到一个压缩包，打开这个压缩包，里面有一些文件是没用的。
画红线的留着，其他没画的可以删除
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/520fcbdd-fba1-41d1-bcce-c87f03d6b6472022040454ea1ed4-b5de-42e8-af78-ccc11491e9b51.jpg)
搭建项目
1.在vue-cli、element-ui项目中，src文件夹->assets->文件夹下面创建名字为icon的文件夹
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/f57e1b7a-f186-4a2a-b81b-b3119d18fbd320220404b39631dd-6ea3-4c94-a175-d49746640df71.jpg)
2.将上面第六步中画红线的文件拷贝到icon文件夹中。
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/ba1d1f47-3a30-4530-ac6f-7802f4cb71d620220404be92c5db-9e56-4f0c-902d-1db22ba2a7731.jpg)
3.找到项目中的main.js文件，导入iconfont.css样式
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/d0e35e9f-d576-4e21-bfba-de6d7e84bf5920220404e1400950-c048-48d2-af49-93e2b8bae4dd1.jpg)
4.打开iconfont.css文件你会看到，
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/04dd36ac-7289-4f27-b26a-6f78e6546a4b20220404c6ba4560-7f3c-4425-bc28-c097687326a91.jpg)
上面的是，你创建项目时候定义的字体，下面的是你一会要引入的样式类名（就是你想要的图标）
5.ok我们这回终于可以引用图标了
<span class="fontFamily hhtx-shezhi"></span>//记住别写错！！在这里可以根据这个类名改变这个图标的字体大小、颜色、、、、
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/972ace6a-4910-4782-ae19-4466fbb5176d20220404a2cc9022-32bd-4216-b18b-9ab18c7f609d1.jpg)
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/4f41cb51-156f-4433-8779-b86615c7304520220404594398c3-9ff8-4cd7-b6fd-e970eac81eee1.jpg)
我习惯用引入类名方式，当然还有icon=”fontFamily hhtx-shezhi” 这种方式
6.效果展示
![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/ae1a5736-059b-409e-bece-7888b15236862022040449186ffc-c36b-47cd-ac2a-a87c811573281.jpg)
7.假如你还想要其他图标，那就继续往里面添加入库，然后下载文件，找到有用的文件复制粘贴到icon文件夹里面来，一定要把之前的替换掉
总结
引入的图标是不是比你平时引入的img高大尚很多，它还可以支持css的语法，文件体积还小，还可以让其不和element-ui图标冲突，赶快入手吧！
这是我的微信公众号全是技术文章：
不定期更新前端知识
这个是我本人的，前端技术QQ交流群，有不会的问题，可以在在群里面问：![Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]](http://qn.javajgs.com/20220404/a2880b16-d6dd-49fa-b974-1d6f1661b1d420220404f791f62c-ae4d-4c11-96cf-335761dcad5f1.jpg)
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/124725.html原文链接：https://javaforall.net
