天天看點

vue 引入iconfont圖示庫

  1. 進入inconfont官網:https://www.iconfont.cn/
  2. 選擇/搜尋想要的圖示,加入購物車,
  3. 将加入到項目檔案夾,若沒有,就建立一個,取項目名
    vue 引入iconfont圖示庫

建立項目後,可以下載下傳至本地

vue 引入iconfont圖示庫

4. 壓縮包解壓後,裡面有這些檔案

vue 引入iconfont圖示庫

5. 在需要的頁面導入,如vue項目裡導入:import ‘/assets/icon/iconfont.css’

6. 也可以打開demo_index.html檔案

vue 引入iconfont圖示庫

demo_index.html裡有引用的說明介紹

vue 引入iconfont圖示庫

7. 引用圖示 ,例如

<i class="icon-zhaopinguanli"></i>