1. 程式人生 > 其它 >3.iconfont製作圖示

3.iconfont製作圖示

1.直接使用elemnt內建圖示庫:

圖示彙總地址:https://www.pianshen.com/article/65321054060/

1.使用i元素:

<iclass="el-icon-edit"></i>

2.element部分元件中設定icon

<el-inputsuffix-icon="el-icon-search"></el-input>

2.iconfont的使用:--製作個人圖示

1.開啟網址https://www.iconfont.cn/,選擇“圖示庫”,選擇“官方圖示庫”

2.在搜尋框裡輸入“搜尋”或“向左”,查詢想要的圖示,選擇“新增入庫”

3.點選購物車車,選擇“新增至專案”,新增個專案且輸入專案名後點確定

4.”我的專案“,選擇“下載至本地”

5.專案的src/assets/style裡新建一個iconfont的資料夾,將下面幾個檔案複製到新建的iconfont資料夾內

6.將這個檔案複製到專案的src/assets/style下,然後根據自己的需要改下url路徑:

7.專案的main.js裡引用下iconfont.css

import '@/assets/style/iconfont.css'

8.最後將iconfont網站裡的圖示點“複製程式碼”,然後在專案裡貼上一下使用:

cjl