iconfont 中图标以及字体库在页面中的引用

一、引用字体

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;" />

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~