微信小程序中引用FontAwesome字體
發(fā)布時間：2018-04-23 11:20 所屬欄目：小程序開發(fā)教程
1.到Font Awesome官網(wǎng)下載字體包官網(wǎng)鏈接:Font Awesome中文官網(wǎng) 2.打開1中下載的壓縮包找到.ttf文件
如下圖所示: 3.上傳2中的字體文件到https://transfonter.org/，選擇base64 編嗎 ，convert后下載
如下圖所示:
下一步 4.打開3中下載的文件，找到stylesheet.css
5.在桌面新建一個fontAwesome.wxss文件
6.打開4中的文件，復(fù)制里面的代碼到5中的新建的fontAwesome.wxss文件中
stylesheet.css代碼如下:
復(fù)制到fontAwesome.wxss中: 7.打開1中的文件font-awesome.css,復(fù)制里面的css(去掉@font-face部分)到新建的fontAwesome.wxss文件中（接著6中復(fù)制內(nèi)容的后面）
font-awesome.css如下:
打開文件:
復(fù)制其余部分到fontAwesome.wxss 8.然后引入小程序中直接用就可以了
<view class="weui-cells weui-cells_after-title bug">
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<icon class="fa fa-bug fa-lg" />
</view>
<view class="weui-cell__bd">建議反饋</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
</view>
效果圖如下: |
