微信小程序使用阿里巴巴iconfont字體圖標(biāo)

  1. 打開阿里巴巴iconfont官網(wǎng) http://www.iconfont.cn/;

  2. 把用到的字體圖標(biāo)加到項(xiàng)目里面;

  3. 進(jìn)入到項(xiàng)目里面，選擇font class方式來使用，如果沒有生成過代碼的同學(xué)點(diǎn)生成，已經(jīng)有代碼的直接復(fù)制代碼;
    iconfont.png
    iconfont.png

4.瀏覽器新建頁面，把復(fù)制的代碼粘貼到地址欄，回車。然后全選頁面的內(nèi)容，復(fù)制;
image.png

5.把復(fù)制的頁面內(nèi)容粘貼到項(xiàng)目的app.wxss文件(粘貼到app.wxss，項(xiàng)目里的每個頁面都能使用，如果只是某一個頁面用到的話，也可以粘貼到對應(yīng)頁面的wxss文件);
image.png

6.使用某個字體圖標(biāo)。把鼠標(biāo)懸浮到要使用的字體圖標(biāo)上面，然后點(diǎn)復(fù)制代碼，或者直接復(fù)制字體圖標(biāo)的類名(沒留意過叫什么，應(yīng)該是叫類名吧)。然后到項(xiàng)目要使用字體圖標(biāo)頁面的wxml，用個微信小程序支持的行內(nèi)標(biāo)簽(我用的是<i>)，把類名粘貼上去就OK啦！

<view>
    <i class="iconfont icon-feiji2" style="font-size: 100px; color: red;" />
    <text>我是字體圖標(biāo)，飛機(jī)</text>
</view>
image.png
iconfont

  1. 效果圖
    image.png
告辭
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容