Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

全栈程序员-用户IM • 2022年4月20日上午8:20 • 未分类

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。2018-11-9更新1.傻瓜式引用：由于这种方法及其简单省去了很多繁琐的步骤，a.引入项目生成的，图标地址。b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4…

大家好，又见面了，我是你们的朋友全栈君。

我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。

2018-11-9更新

VX号: LJT-917

这是我的微信公众号全是技术文章： Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

1.傻瓜式引用：由于这种方法及其简单省去了很多繁琐的步骤，

a.引入项目生成的，图标地址。

b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

2.笨拙式引用：

准备工作

1. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

先注册，再登录、找到图标管理、我的项目

2. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

点紫色的这个创建自己的项目

3. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

图中画红线的地方很重要

1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。

如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来

2）、FontFamily随便起一个名字，你能记住就行

4.项目创建完了，你可以往项目里面添加自己想要的图标了

1）、比如我想要一个设置的图标

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

搜索之后能找出来好多不一样的设置图标，找到你想要的图标，点击添加入库，当你点击完之后，购物车会出现你刚才添加入库的数量

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

点这个购物车

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

点添加至项目，这时候回弹出来你刚才创建好的项目，选中你刚创建好的项目，在点击下面的确定

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

5、OK!!! 图标添加完毕！！

找到我的项目->你刚才创建的那个项目->点击下载到本地

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

6、你会得到一个压缩包，打开这个压缩包，里面有一些文件是没用的。

画红线的留着，其他没画的可以删除

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

搭建项目

1.在vue-cli、element-ui项目中，src文件夹->assets->文件夹下面创建名字为icon的文件夹

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

2.将上面第六步中画红线的文件拷贝到icon文件夹中。

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

3.找到项目中的main.js文件，导入iconfont.css样式

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

4.打开iconfont.css文件你会看到，

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

上面的是，你创建项目时候定义的字体，下面的是你一会要引入的样式类名（就是你想要的图标）

5.ok我们这回终于可以引用图标了

<span class="fontFamily hhtx-shezhi"></span>//记住别写错！！

在这里可以根据这个类名改变这个图标的字体大小、颜色、、、、

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂] 我习惯用引入类名方式，当然还有icon=”fontFamily hhtx-shezhi” 这种方式

6.效果展示

Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

7.假如你还想要其他图标，那就继续往里面添加入库，然后下载文件，找到有用的文件复制粘贴到icon文件夹里面来，一定要把之前的替换掉

总结

引入的图标是不是比你平时引入的img高大尚很多，它还可以支持css的语法，文件体积还小，还可以让其不和element-ui图标冲突，赶快入手吧！

这是我的微信公众号全是技术文章： Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

不定期更新前端知识

这个是我本人的，前端技术QQ交流群，有不会的问题，可以在在群里面问： Vue、Element-ui项目中如何使用Iconfont(阿里图标库)[通俗易懂]

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/124725.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)

全栈程序员-用户IM

0 0

Linux Redhat 7.6 操作系统下载安装详解「建议收藏」

Linux Redhat 7.6 操作系统下载安装详解「建议收藏」redhat系统镜像分享[百度网盘分享]链接：https://pan.baidu.com/s/1U0SUh7qmLGfpLN5Fqb4Wgg提取码：bpwdredhat7.6版本安装详解

全栈程序员-用户IM
2022年8月5日
EasySwoole的入门学习

EasySwoole的入门学习EasySwoole的入门学习官网地址：https://www.easyswoole.com/一、安装easyswoole：（1）建立安装目录：（2）使用composer下载easyswool

全栈程序员-用户IM
2022年8月1日
内核态和用户态区别的重要性_cpu用户态和内核态区别

内核态和用户态区别的重要性_cpu用户态和内核态区别内核态和用户态区别内核态和用户态区别当一个任务（进程）执行系统调用而陷入内核代码中执行时，我们就称进程处于内核运行态（或简称为内核态）。此时处理器处于特权级最高的（0级）内核代码中执行。当进程处于内核态时，执行的内核代码会使用当前进程的内核栈。每个进程都有自己的内核栈。当进程在执行用户自己的代码时，则称其处于用户运行态（用户态）。即此时处理器在特权级最低的（3级）用户代码中运行。当正在

全栈程序员-用户IM
2022年9月17日
java轻量级web框架_什么是框架

java轻量级web框架_什么是框架JEMSF框架前言今天我们准备向广大开发人员推荐一种新的框架，暂时取名JEMSF，如果您已经对Struts、Tapestry以及Spring和Hibernat有一些了解，那么应该可以更好的理解下面的文章，JEMSF是我在工作生涯中最大的一个创造，经历了很多考验和应用的试验，最后形成JEMSF。序一种新的事物的诞生需要经历很多的考验，我自认为JEMSF是一个很好的WEB应用框架，很久以前（2…

全栈程序员-用户IM
2022年9月7日
Python安装教程（新手）

Python安装教程（新手）第一次接触Python，可能是爬虫或者是信息AI开发的小朋友，都说Python语言简单，那么多学一些总是有好处的，下面从一个完全不懂的Python的小白来安装Python等一系列工作的记录，并且遇到的问题也会写出，让完全不懂的小白也可上手安装，并且完成第一个Helloworld代码。[Python安装]进入Python的官方下载页面http://www.python.org/download/出现很

全栈程序员-用户IM
2022年4月30日
java语言的平台无关性是指什么,《深入Java虚拟机》学习笔记二：平台无关性

java语言的平台无关性是指什么,《深入Java虚拟机》学习笔记二：平台无关性第二章平台无关1、Java体系结构对平台无关性的支持对平台无关性的支持，是分布在整个Java体系结构中的，所有的组成部分，包括语言、class文件、API及虚拟机，都在对平台无关性的支持方面扮演着重要角色。Java平台扮演一个运行Java程序与其下的硬件和操作系统间的缓冲角色。Java程序被编译为可运行于Java虚拟机的二进制程序，并且假定JavaAPI的class文件在运行时都是可用的，接着虚…

全栈程序员-用户IM
2022年7月7日

发表回复

关注全栈程序员社区公众号