結(jié)合自己開發(fā)經(jīng)歷弧蝇，總結(jié)在uni框架下使用字體圖標(biāo)的流程码泞。開始之前可以先學(xué)習(xí)下面的官方文檔绩郎，通過文檔已經(jīng)能夠掌握使用赖瞒，就不用聽我多BB了
文章寫得不合理的地方歡迎批評指正

阿里圖標(biāo)庫幫助文檔
uni字體圖標(biāo)的使用

建立Iconfont資源

1.登錄iconfont官網(wǎng)（沒有賬號請自行注冊登錄）
2.找到圖標(biāo)管理->我的項(xiàng)目->然后新建項(xiàng)目:

我的項(xiàng)目

新建項(xiàng)目

添加圖標(biāo)到購物車

購物車圖標(biāo)添加到項(xiàng)目

生成代碼

Iconfont資源的使用

uni-app 本地路徑圖標(biāo)字體支持情況：
字體文件小于 40kb，uni-app 會自動將其轉(zhuǎn)化為 base64 格式
字體文件大于等于 40kb爬凑， 需開發(fā)者自己轉(zhuǎn)換徙缴，否則使用將不生效
字體文件的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）

資源的引入（a,b兩種方式）

a.字體文件小于40kb，直接引入使用

image.png

<style>
    @font-face {
        font-family: 'iconfont';
        font-weight: normal;
        font-style: normal;
        src: url('https://at.alicdn.com/t/xxxxxxxxxxx.ttf') format('truetype');
    }
    .iconfont {
        font-family: 'iconfont' !important;
        font-size: 30px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-message:before {
        content: "\e604";
    }
<style>

b.字體文件大于40kb嘁信，轉(zhuǎn)化為 base64 格式后引用
將字體文件下載到本地==>解壓==>Base64編碼.ttf后綴文件==>將Base64碼復(fù)制到項(xiàng)目里
轉(zhuǎn)換工具地址

資源下載

Base64編碼文件

<style>
    @font-face {
        font-family: 'iconfont';
        font-weight: normal;
        font-style: normal;
        src: url(data:font/truetype;charset=utf-8;base64,轉(zhuǎn)換的base64內(nèi)容) format('truetype');  
    }
    .iconfont {
        font-family: 'iconfont' !important;
        font-size: 30px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-message:before {
        content: "\e604";
    }
<style>

注：font-family 使用的時候務(wù)必保持一致（可以改名字）于样。轉(zhuǎn)換的base64內(nèi)容太長，為不影響閱讀潘靖，需自行復(fù)制替換穿剖。微信不支持本地字體圖標(biāo)（即iconfont.css文件添加到項(xiàng)目，并在.vue文件下引用出錯）卦溢，報(bào)如下錯誤

微信不支持本地字體圖標(biāo)

具體使用糊余，為了演示效果，采用多種寫法

<template>
    <view>
        <view>
            <!-- 直接復(fù)制代碼 -->
            <text class="iconfont">&#xe958;</text>
            <view class="iconfont">&#xe958;</view>
            <!-- 引用.css文件生成的style -->
            <text class="iconfont icon-message"></text>
            <view class="iconfont icon-message"></view>
        </view>
    </view>
</template>

iconfont.css文件結(jié)構(gòu)

參考資料

uni-app 引入本地iconfont的正確姿勢
在uni-app項(xiàng)目中使用iconfont
iconfont字體圖標(biāo)的使用方法--超簡單!