uni-app nvue项目使用iconfont字体图标

首先,选择自己想要的图标,添加至自己的项目,具体教程就不出了,相信能搜这个解决方案的人都会,iconfont官网戳这里

 

请一定要仔细看备注内容~~

 

远程ttf文件方式

复制如下地址,补上前面补上https:  完整的地址为:https://at.alicdn.com/t/font_1911079_a4go6gdw4y6.ttf

uni-app nvue项目使用iconfont字体图标_第1张图片

 nvue页面代码,看备注哦~





 

 

本地ttf文件方式

还是刚才那一个路径,复制后前面拼接上https: ,粘贴到浏览器地址栏按回车,ttf文件就会下载下来

下载下来后,复制到项目static文件夹下,因为是静态文件,请一定放到static文件夹下,然后可以重新命名

uni-app nvue项目使用iconfont字体图标_第2张图片

nvue页面代码,看备注哦~






 

本地base64方式

同上,将ttf文件下载到本地,然后转换为base64编码,转换网站戳这里

uni-app nvue项目使用iconfont字体图标_第3张图片

"url('data:font/truetype;charset=utf-8;base64,转码后的内容替换到这里来')"

nvue页面代码,看备注哦~






 

 

最终的效果

uni-app nvue项目使用iconfont字体图标_第4张图片

你可能感兴趣的:(uni-app,uni-app,nvue)