重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

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

时间:2020-09-08 07:00:08 作者:重庆seo小潘 来源:
下载font-awesome字体包打开Transfonter网站,上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换,并未尝试),选择base64编码,convert后下载 下载得到的包中有style文件,打开后获得以下代码,并对照font-awesome.css中的内容,加入到微信小程

下载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>以上就是微信小程序如何使用font-awesome图标的详细内容,更多请关注小潘博客其它相关文章!