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

下载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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


网页授权获取用户信息的方法
报错config:invalid signature的解决方案
微信开发百思不得姐实战教程
详解微信开发input输入框
教你libco是如何支撑巨大数据信息量的
微信二次开发之文本消息请求与发送
微信开发H5轻游戏
scroll-view完成列表页的方法详解
Java微信开发之自定义菜单的创建
微信开发之input控件的实例详解
微信开发Emoji表情的实例教程
微信开发中详解textarea的使用方法
微信开发中使元素占满全屏的方法介绍
微信开发之数据访问的方法详解
微信二次开发之各类型消息封装
微信开发之数据库操作
如何获取微信好友的地理位置信息
分享3款微信开发开源框架
微信开发之获取服务器IP
微信开发之公交换乘功能代码详解