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




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

网上看到的方法,亲测成功:参考方法

  1. 下载font-awesome字体包

image.png

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

image.png

image.png


convert完毕后点击Download(下载神慢),下载得到的包中有stylesheet.css文件,打开后获得以下代码,并对照font-awesome.css中的内容,加入到微信小程序的app.wxss文件中

stylesheet.css

image.png

font-awesome.css

image.png

在写入app.wxss时将字体名改成了fa

image.png


/* 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;

}



然后在小程序中使用class="fa fa-flag"等font-awesome即可,如


    微信小程序

    添加font-awesome:


image.png

热门文章

  • 体育总局冬运中心关于选派2023-2024赛季全国高山滑雪冠军赛技术官员的函
  • 体育总局冬运中心关于公示第十四届全国冬季运动会冬季两项项目参赛运动员名单的函
  • 中国滑雪协会关于发布全国滑雪俱乐部精英联赛(吉林站)竞赛规程的通知
  • 体育总局冬运中心关于第十四届全国冬季运动会冬季两项项目替换运动员的通知
  • 体育总局冬运中心关于公布第十四届全国冬季运动会单板滑雪U型场地等项目决赛参赛运动员名单的通知
  • 体育总局冬运中心关于公布第十四届全国冬季运动会冬季两项项目参赛运动员名单的通知
  • 体育总局冬运中心关于取消举办2023-2024赛季全国冬季两项冠军赛的通知
  • 体育总局冬运中心关于选派裁判员参加2023-2024赛季单板滑雪平行项目全国冠军赛暨国际雪联FIS积分赛的函
  • 中国滑雪协会关于全国滑雪俱乐部精英联赛(吉林站)的补充通知
  • 2023-2024赛季全国跳台滑雪冠军赛竞赛规程
  • 2023-2024赛季全国高山滑雪冠军赛竞赛规程
  • 体育总局冬运中心关于选派2023-2024赛季全国高山滑雪锦标赛暨第十四届全国冬季运动会高山滑雪资格赛技术官员的函
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪U型场地冠军赛竞赛规程的通知
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪大跳台和坡面障碍技巧冠军赛竞赛规程的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会越野滑雪项目参赛运动员名单的函