使用iconfont彩色图标
程序员文章站
2022-03-15 13:11:24
...
概述:采用下载至本地导入,然后在前端代码里引用这个js。
步骤:
1、找到需要的图片,点击“添加入库”
2、可以添加到项目
3、选择Symbol,下载到本地
4.在本地下载路径中解压,将iconfont.js复制到项目src/assets路径下
------>
5.在<style>加入通用css代码(引入一次就行):
<style>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
6.挑选相应图标并获取类名,应用于页面.注意:在xlink:href="#"
后面接的就是自己的图标的font-class
,比如我这里的图标就是icon-lajitong。可以通过下图的“复制代码”得到,或者图标下面有写。
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lajitong"></use>
</svg>
</div>
上一篇: Java中的断言
下一篇: 如何使用iconfont图标