小程序使用font-awesome图标的方法
这篇文章给大家分享的是有关小程序使用font-awesome图标的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
我们提供的服务有:成都网站设计、网站制作、微信公众号开发、网站优化、网站认证、五寨ssl等。为千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的五寨网站制作公司
下载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//wADAAJVpAAAAAhnbHlmHejPwQAAGdQAAh4kaGVhZAbB4eAAAADcAAAANmhoZWEO+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"即可,如
感谢各位的阅读!关于“小程序使用font-awesome图标的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
分享名称:小程序使用font-awesome图标的方法
URL链接:http://ybzwz.com/article/iihhdh.html