小程序如何引入fontAwesome

在开发小程序的时候, 一开始我所有的小图标都是直接在ps里面抠图下来, 然后使用image标签展示的, 后来组长给我提建议说, 能使用字体图标就更好了, 这样加载速度更快, 体验更加流畅, 那好吧, 既然组长都提了, 我也只能去查找资料小程序里面如果引入字体图标, 诶, 没想到还真可以! 那就引入吧!

1. 先去Font Awesome官网下载字体包

官网链接: Font Awesome中文官网

2. 打开下载的压缩包, 找到.ttf文件

如下图所示:

3. 上传2中的字体文件到 https://transfonter.org/，选择 base64 编吗，convert后下载

如下图所示:

下一步 :

4. 打开3中下载的文件，找到 stylesheet.css

如下图所示:

5. 复制里面的代码到微信小程序中的app.wxss中, 或者新建一个 fontAwesome.wxss 文件

stylesheet.css代码如下:

复制到fontAwesome.wxss中:

6. 打开1中的文件font-awesome.css, 复制里面的css(去掉@font-face部分)到新建的fontAwesome.wxss文件中（接着6中复制内容的后面）

font-awesome.css 文件位置 如下:

打开文件:

复制其余部分到fontAwesome.wxss

7. 然后引入小程序中直接用就可以

<view class='user-content'>
  <navigator class='navigator' url="/pages/aboutUs/aboutUs">
    <icon class="fa fa-user-circle-o fa-lg" />
    <view class='user-name'>关于我们</view>
    <image class='user-arrow' src='/images/arrow.png' mode='widthFix'></image>
  </navigator>
  <navigator class='navigator' url="/pages/favorite/favorite">
    <icon class="fa fa-star fa-lg" />
    <view class='user-name'>收藏夹</view>
    <image class='user-arrow' src='/images/arrow.png' mode='widthFix'></image>
  </navigator>
  <view class='navigator' bindtap='focusPublic'>
    <icon class="fa fa-heart fa-lg" />
    <view class='user-name'>关注公众号</view>
    <image class='user-arrow' src='/images/arrow.png' mode='widthFix'></image>
  </view>
  <view class='navigator last' bindtap='logout'>
    <icon class="fa fa-sign-in fa-lg" />
    <view class='user-name'>退出登录</view>
    <image class='user-arrow' src='/images/arrow.png' mode='widthFix'></image>
  </view>
</view>

效果图如下: