欢迎光临万书涛的个人博客

Uni-app如何引入font-awesome字体图标库

作者:万书涛  / 日期:2021-08-18 22:38:06 /  来源:本站原创 /   浏览:
摘要
字体图标在网站开发中用的比较多,现在免费可供使用的一般用font-awesome比较多,网站引入字体图标后能够起到提示和美化页面的作用,能够提升网页精致感,那么,如果我们希望在小程序中引入字体图标该如何操作呢?下面就和万书涛一起来看一下吧。  
首先先下载font-awesome字体库,这个百度搜索就行,下载完后是一个压缩文件,解压后得到几个文件夹,我们只需要fonts和css文件夹里的文件。
 
因为小程序只支持base64位格式的字体图标,所以我们要把下载的font-awesome字体进行base64转化。
 
打开https://transfonter.org/,这是一个在线转化网站,如下图,点击箭头1处的Add fonts,会弹出选择文件窗口,找到上面我们下载的字体库的fonts/fontawesome-webfont.ttf文件,然后如下图所示勾选on和ttf,然后点击3的Convert开始转换,转换成功后会出现箭头4的download,点击download进行下载。

字体库引入操作截图一

下载完成后共两个文件,分别是FontAwesome.ttf和stylesheet.css,FontAwesome.ttf就是转化成的base64文件,另一个是样式表文件,然后打开转化后的stylesheet.css,将里面的@font-face复制,然后替换掉原版css/font-awesome.css的@font-face ,只替换这个标签所属样式就行,其他不变,然后把替换后的font-awesome.css和FontAwesome.ttf放到项目中并引用即可,代码如下:
<view>
<text class="fa fa-address-book">测试练习</text>
</view>
 
最终效果如下图,可以看到,图标顺利生成。

字体库引入操作截图二

以上就是在小程序中如何引入font-awesome方法,引入整套字体库后,就可以在需要的地方引用不同的字体图标了。
 
所属分类: 暂无分类
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wxxcx/260.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息