直接将icon下载成图片使用或者通过import方式移入url使用,看此篇
本文介绍两种使用方案:1.使用Font class引入字体图标(推荐) 2.使用Symbol 引用
如果是分批次的下载了好几次字体图标,那么可以将解压的代码css等文件放在不同的文件夹内,分别引入使用即可
准备工作:登入阿里字体图标库
选择图标加入购物车
下载代码:
一、解压后,将除了html的文件都复制一份到自己项目assets下:
二、点击打开之前解压的html文件
三、main.sj下引入字体图标样式:
四、两种使用方案
方案1:通过Font class引入字体图标,类名修改字体图标的大小和颜色(
推荐此方法
:可改变图标大小和颜色)
步骤:1.1先使用<span class="iconfont icon-类名"></span>
引入;
1.2.再通过对应class类名修改css样式;
方案2:使用Symbol 引用(此方法,svg对于原图标有颜色的,会自动带入颜色,同时修改不了其颜色;对于无颜色的图标,可修改颜色;)
2.1.先在app.vue下引入通用 CSS 代码(引入一次就行);
通用 CSS 代码:
<style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>
2.2.在对应页面的下使用svg引入图标;
svg代码:
2.3.也可以给svg添加类名修改图标样式:(此方法,svg对于原图标有颜色的,会自动带入颜色,同时修改不了其颜色;对于无颜色的图标,可修改颜色;)