微信小程序如何使用font-awesome图标?_点点客
点点客

科技造就移动电商先锋

股票代码:430177

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

点点客 2017-08-16

微信小程序使用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>

 

免责声明

此版块内容仅用于学习、研究或欣赏。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关访问者可将本网站提供的内容或服务用于学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯本网站及相关权利人的合法权利。