uniapp 引入iconfont的方法
2022-09-06 22:36:30

文章目錄

• ??1. 加入購物車??
• ??2. 下載代碼??
• ??3. 創(chuàng)建靜態(tài)目錄??
• ??4. 樣式字體復(fù)制??
• ??5. 字體轉(zhuǎn)碼??
• ??6. 轉(zhuǎn)碼內(nèi)容替換??
• ??7. 樣式引入??
• ??7. 使用??
• ??8. 個性化使用??

阿里圖標(biāo)庫：??https://www.iconfont.cn/??

1. 加入購物車

選中自己需要的圖標(biāo)依次加入購物車

2. 下載代碼

打開購物車-下載代碼到本地

3. 創(chuàng)建靜態(tài)目錄

在uniapp項目中的static目錄下面，新建iconfont文件夾用于存儲圖標(biāo)，名稱自定義

4. 樣式字體復(fù)制

iconfont.css和iconfont.ttf

5. 字體轉(zhuǎn)碼

將 iconfont.ttf文件轉(zhuǎn)位 base64

轉(zhuǎn)碼地址：??https://www.giftofspeed.com/base64-encoder/??

選擇轉(zhuǎn)碼內(nèi)容

6. 轉(zhuǎn)碼內(nèi)容替換

打開??iconfont.css??文件

內(nèi)容替換

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('data:application/x-font-woff2;charset=utf-8;base64,轉(zhuǎn)碼內(nèi)容粘貼到這里');
}

7. 樣式引入

<style lang="scss">
  /*每個頁面公共css */
  @import '~@/static//iconfont/iconfont.css'
</style>

7. 使用

前面class =iconfont 是固定的，后面的具體class從iconfont.css文件中復(fù)制

<i class='iconfont icon-suoding'></i>
<i class='iconfont icon-shoucangxuanzhong'></i>

8. 個性化使用

比如說，我的收藏圖標(biāo)是黃色的但是，圖標(biāo)默認是黑色，那就自己給圖標(biāo)加顏色就可以，大小，布局等樣式都是一樣的。

<i class='iconfont icon-suoding' style="color: darkgray;"></i>
<i class='iconfont icon-shoucangxuanzhong' style="color: aliceblue;"></i>