uniapp 引入iconfont的方法

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

uniapp 引入iconfont的方法_ico

文章目錄

??1. 加入購物車??
??2. 下載代碼??
??3. 創建靜態目錄??
??4. 樣式字體復制??
??5. 字體轉碼??
??6. 轉碼內容替換??
??7. 樣式引入??
??7. 使用??
??8. 個性化使用??

阿里圖標庫：??https://www.iconfont.cn/??

1. 加入購物車

選中自己需要的圖標依次加入購物車

uniapp 引入iconfont的方法_css_02

2. 下載代碼

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

uniapp 引入iconfont的方法_ico_03

uniapp 引入iconfont的方法_自定義_04

3. 創建靜態目錄

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

uniapp 引入iconfont的方法_圖標引入_05

4. 樣式字體復制

iconfont.css和iconfont.ttf

uniapp 引入iconfont的方法_css_06

5. 字體轉碼

將 iconfont.ttf文件轉位 base64

轉碼地址：??https://www.giftofspeed.com/base64-encoder/??

uniapp 引入iconfont的方法_ico_07

選擇轉碼內容

uniapp 引入iconfont的方法_圖標引入_08

6. 轉碼內容替換

打開??iconfont.css??文件

uniapp 引入iconfont的方法_自定義_09

內容替換

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

uniapp 引入iconfont的方法_ico_10

7. 樣式引入

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

uniapp 引入iconfont的方法_圖標引入_11

7. 使用

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

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

uniapp 引入iconfont的方法_css_12

uniapp 引入iconfont的方法_ico_13

uniapp 引入iconfont的方法_自定義_14

uniapp 引入iconfont的方法_css_15

8. 個性化使用

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

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

uniapp 引入iconfont的方法_ico_16

uniapp 引入iconfont的方法_ico_17

本文摘自：https://blog.51cto.com/g

開通會員，享受整站包年服務

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