字型圖示庫 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()

擴充套件閱讀(推薦閱讀)

相關文章