Vue 添加第三方图标(阿里矢量图)
程序员文章站
2024-02-16 23:18:34
...
1.阿里矢量图官网,创建项目阿里矢量图
2.创建项目后,前缀这里在配置中需要用到,注意
3.选择需要下载的矢量图标,选择Font class,下载到本地
4.解压后获得以下文件
5.到Vue项目下,找个地方存放以上所有文件,直接复制粘贴即可
6.打开iconfont.css文件,对其进行一些配置,这里的icon就是你项目当时配的后前缀!!
[class^="icon"],
[class*=" icon"]/*这里有空格*/
{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
7.配置已完成,在main.js文件中引用
8.使用i标签即可,如果不知道标签的class值,在下载图标是有展示