一、引用字体
1、打开 iconfont-阿里巴巴矢量图标库,找到字体库,选择某个字体,里面有粗细选择,点击下载
2、将下载好的文件解压放置到vue项目中 assets 下的 font文件夹下
3、在全局中引入 styles 下的 index.scss
font-family: 自定义名字
@font-face {
font-family: 'alibaba_light';
src: url("./../assets/font/Alibaba_PuHuiTi_2.0_45_Light_45_Light.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'alibaba_regular';
src: url("./../assets/font/Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'alibaba_medium';
src: url("./../assets/font/Alibaba_PuHuiTi_2.0_65_Medium_65_Medium.ttf");
font-weight: normal;
font-style: normal;
}
4、在需要的页面中调用
<style lang="scss">
.main{
font-family: 'alibaba_regular';
}
</style>
二、引用图标
1、上传图标
A、根据项目不同创建不同的项目
B、将设计里的图标或者iconfont里的图标,以 svg 的格式,并且不同的命名,添加或上传到该项目里
C、下载至本地
2、将下载好的文件放置到vue项目中 assets 下的 iconfont 文件夹下
3、在全局中引入 styles 下的 index.scss
@import './font/iconfont.css';
4、在需要的页面中调用,class中 加 iconfont 和 图标名称,style可以设置图标大小和颜色
<i class="iconfont icon-ava" style="color:#70C1A0;font-size: 90px;" />
希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~