微信小程序使用Font Awesome

下载Font Awesome，然后解压到项目的static目录下。

修改css后缀为wxss

编辑font-awesome.wxss的字体目录

@font-face {
  font-family: 'FontAwesome';
  src: url('/static/awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('/static/awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/static/awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/static/awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/static/awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

src：url里的字体目录修改为自己放置字体的目录

在app.wxss中引用

@import "static/awesome/css/font-awesome.wxss";

使用

<text class="fa fa-heart"></text>

 

有个问题就是，小程序不支持字体上传，所以需要转换下字体，转换字体地址

https://transfonter.org/