失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 微信小程序使用font-awesome图标库

微信小程序使用font-awesome图标库

时间:2023-01-09 06:27:00

相关推荐

微信小程序使用font-awesome图标库

微信小程序使用font-awesome图标库

网上看到的方法,亲测成功:参考方法

下载font-awesome字体包

打开Transfonter网站,上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换,并未尝试),选择base64编码,convert

convert完毕后点击Download(下载神慢),下载得到的包中有stylesheet.css文件,打开后获得以下代码,并对照font-awesome.css中的内容,加入到微信小程序的app.wxss文件中

stylesheet.css

font-awesome.css

在写入app.wxss时将字体名改成了fa

/* app.wxss */@font-face {font-family: 'fa';src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTXLOMIUAAlXMAAAAHEdERUYAJwKrAAJVrAAAAB5PUy8yiDJ6IwAAAVgAAABgY21hcJ0vdNQAAAw4AAADAmdhc3D//wADAAJVpAAAAAhnbHlmHejPwQAAGdQAAh3kaGVhZAbB4eAAAADcAAAANmhoZWEO+QqbAAAB......long long) format('truetype');font-weight: normal;font-style: normal;}.fa {font-family: "fa" !important;font-size: 16px;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;}/* makes the font 33% larger relative to the icon container */.fa-lg {font-size: 1.33333333em;line-height: 0.75em;vertical-align: -15%;}.fa-2x {font-size: 2em;}//long long long...........

然后在小程序中使用class="fa fa-flag"等font-awesome即可,如

<view class="head"><view class="title">微信小程序</view><view class="desc">添加font-awesome:<text class="fa fa-flag"></text></view></view>

此为上面实现的demo

如果觉得《微信小程序使用font-awesome图标库》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。