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?
·
一、本地引入
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
更多推荐
已为社区贡献3条内容
所有评论(0)