最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

微信小程序如何使用font-awesome图标-微信开发

来源:http://erdangjiade.com/topic/139238.html 微信开发爱好者 2017-11-01 00:11浏览(87)

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

下载得到的包中有style文件,打开后获得以下代码,并对照font-awesome.css中的内容,加入到微信小程序的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-user"即可,如<text class="fa fa-user"></text>

以上就是微信小程序如何使用font-awesome图标的详细内容,更多请关注二当家的素材网其它相关文章!

标签: 微信
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2