uniapp引入阿里图标库iconfont的三种方式

一、本地引入

1、下载font class文件至本地

2、解压后，将字体文件.ttf,.woff,.woff2和iconfont.css一起拷贝到static目录下

3、修改iconfont.css文件（非常重要）

@font-face {
  font-family: "iconfont"; /* Project id 2142473 */
  src: url('~@/static/iconfont.woff2?t=1620622127571') format('woff2'),
       url('~@/static/iconfont.woff?t=1620622127571') format('woff'),
       url('~@/static/iconfont.ttf?t=1620622127571') format('truetype');
}

在url中添加

~@/static

否则会报错，找不到字体文件

然后在app.vue中引入

@import "./static/iconfont.css";

---

二、线上引入

直接在app.vue中引入线上地址

@import "//at.alicdn.com/t/font_2142473_g81h0zml1n9.css?spm=a313x.7781069.1998910419.40&file=font_2142473_g81h0zml1n9.css";

小程序需要加https

---

三、base64引入

因为阿里图标库不再支持base64,可以用借用线上网址（https://www.giftofspeed.com/base64-encoder/） 将.tff文件，转换成base64使用，然后替换原来的url

@font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}

这里要改成format('truetype')

在app.vue中引入

@import "./static/iconfont.css";

在dom中使用

<text class="iconfont icon-rongzijihuasvg"></text>

以上三种方法都可以引用阿里图标库啦 

 

转载至https://note.youdao.com/ynoteshare1/index.html?id=0fa2b46803c5b8a3c309925876096720&type=note