3.iconfont製作圖示
阿新 • • 發佈:2022-03-03
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網站裡的圖示點“複製程式碼”,然後在專案裡貼上一下使用: