字型圖示庫 iconfont、iconmoon 的維護管理與使用探索

suwanbin發表於2021-04-18

字型圖示庫的使用

這是之前留下的部落格，由於一堆部落格沒寫完，本週週末做了個補充，可能內容上會有點不太斜街，請見諒...

  • 本文大部分內容是自己結合過往經驗探索總結的字型圖示維護方式

iconfont-阿里向量圖示庫

登入/註冊

開啟阿里向量圖示庫地址：https://www.iconfont.cn/home/index，並使用 github 賬號註冊/登入

蒐集需要的圖示

選中選單的圖示庫，然後點選頁面右側的紅色搜尋按鈕

如下圖是我搜尋 地圖 出來的圖示庫列表

在首頁搜尋你想要的圖示（中英文都 ok）

維護專案圖示庫

有兩種方式，下文以本地使用的方式展開

1.使用線上地址引入 iconfont，每次線上改完就生效貌似每次改完地址都會變，後續自己測試一下

2.下載到本地使用，每次改完重新下載壓縮包替換

更改圖示

1.直接編輯圖示做更改，然後下載替換

  • 對圖示在網格中的位置、大小、旋轉角度進行調整

2.上傳新圖示來替換

  • 點選商場替換 icon

新增圖示

iconfont 網站上面搜、找

找到了加到購物車，然後新增至專案，然後下載替換即可

自制 svg 圖示，上傳到 iconfont 上

找設計同事要來 svg 格式的圖示，傳到 iconfont 上，新增至專案，下載替換原檔案

可以一次選中多個圖示上傳

刪除圖示

直接在專案裡刪除，然後重新下載檔案或重新生成連結應用即可

接手老專案開發（擴充套件圖示）

今天一探索，對於 iconfont 還存在著一個問題

對於接手的老專案，想要擴充套件字型圖示怎麼辦？

  • 如果有線上 iconfont 專案，把你拉進去作為專案成員當然好，如果人家離職了，沒有線上 iconfont 專案或者不拉你進去？

方案一：新建 iconfont 專案，編輯專案，更改 Font Family 為其他值（推薦，方便再後續維護以及自己找圖示）

沒有專案用的 iconfont 專案，就只能自己新建一個咯？

  • 注意 Font Family 寫另外的值

然後往裡面新增圖示...

下載 iconfont 專案圖示庫到本地，放到專案目錄下

  • demo 目錄結構如下
.
│  index.html
│
├─iconfont
│      demo.css
│      demo_index.html
│      iconfont.css
│      iconfont.eot
│      iconfont.js
│      iconfont.json
│      iconfont.svg
│      iconfont.ttf
│      iconfont.woff
│      iconfont.woff2
│
├─iconfont-new
│      demo.css
│      demo_index.html
│      iconfont.css
│      iconfont.eot
│      iconfont.js
│      iconfont.json
│      iconfont.svg
│      iconfont.ttf
│      iconfont.woff
│      iconfont.woff2
│
└─img
        bg.png

頁面裡引入該 css，在頁面上使用

  • 兩個 iconfont 專案圖示庫使用案例如下（主要是新的 iconfont 圖示怎麼用，舊的不用管，直接替換就行了）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 老 iconfont 專案的引用 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <!-- 新 iconfont 專案的引用 -->
  <link rel="stylesheet" href="./iconfont-new/iconfont.css">
</head>

<body>
  <!-- 老 iconfont 專案的圖示引用方式（不變） -->
  <i class="iconfont icon-kpi"></i>
  <!-- 新 iconfont 專案的圖示引用方式，iconfont 要改為建立專案時使用的 Font Family 名 -->
  <i class="iconfont-new icon-bus-fill"></i>
</body>

</html>

方案二：國外平臺 iconmoon 擴充套件（不需要翻牆，訪問速度也還好）

iconfont 的 iconfont.svg 檔案可以直接匯入到 iconmoon 平臺裡，後續用 iconmoon 來做擴充套件，對圖示進行管理

基本功能介紹
  • 滑鼠狀態在編輯時，可以對單個圖示進行修改
單個圖示的修改
  • 包括標籤 class 名的更改、圖示的替換
匯出字型圖示到專案中使用

  • 選中要匯出的圖示（注意滑鼠狀態）

  • 點選 Generate Font

  • 可以對 iconmoon 字型圖示做一些整體配置

    • icon 字首、圖示使用 icon 名、預設使用 i 標籤

  • Download，將檔案引入專案使用即可（動圖演示如何選中圖示到下載圖示包）

（壓縮包裡的 .svg 檔案也可以直接拿來匯入 iconmoon，對原有圖示進行管理）

頁面使用

目錄結構

│  index.html
│
└─iconmoon
    │  demo.html
    │  Read Me.txt
    │  selection.json
    │  style.css
    │
    ├─demo-files
    │      demo.css
    │      demo.js
    │
    └─fonts
            icomoon.eot
            icomoon.svg
            icomoon.ttf
            icomoon.woff

使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字型圖示使用 demo</title>
  <!-- 引入 iconmoon 的樣式檔案 -->
  <link rel="stylesheet" href="./iconmoon/style.css">
  <style>
    body {
      font-size: 55px;
      color: red;
    }
  </style>
</head>
<body>
  <i class="icon-mutil2pure-color-pyq"></i>
  <i class="icon-pure-color-pyq"></i>
  
  <!-- 這是多色圖示用法 -->
  <span class="icon-mutil-color-pyq"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span></span>
  <!-- <i class="icon-mutil-color-pyq"></i> -->
</body>
</html>
iconfont 與 iconmoon 的使用案例下載
  • 由於這是之前起草的部落格，最近才做的完善，demo 和此部落格後續內容不太相關，但原理是相同的，不知道怎麼用的網友可以看下 demo

連結：iconfont-demo（包含了 iconmoon）

js 指令碼操作頁面...

做了個思路擴充套件，以後都可以使用 js 指令碼來做一些操作，減少手動操作成本...

  • 給頁面引入 jquery
let importJs=document.createElement('script') // 在頁面新建一個script標籤
importJs.setAttribute("type","text/javascript") // 給script標籤增加type屬性
importJs.setAttribute("src", 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js') // 給script標籤增加src屬性， url地址為cdn公共庫裡的
document.getElementsByTagName("head")[0].appendChild(importJs) // 把importJs標籤新增在頁面
  • 執行加入購物車的點選事件
$('.block-icon-list .icon-cover span[title="新增入庫"]').length // 如果等於 0，就是選擇器寫的有問題，或許 iconfont 規則改了...
$('.block-icon-list .icon-cover span[title="新增入庫"]').click()

擴充套件閱讀（推薦閱讀）

相關文章