- https://www.iconfont.cn/ -- 點選連結進入官網
-
擇自己需要的圖示加購物車
- 點選資源管理-》我的專案
- 選擇你需要的專案-》下載到本地
- 將下載的壓縮包進行解壓，解壓後生成一個iconfont資料夾，將整個iconfont資料夾放在assets中 -- assets/iconfont
- 雙擊 demo_index.html 檔案可以在瀏覽器開啟。
- 普通圖示使用 和 有色圖示使用
- 普通圖示
普通圖示使用 --- 選擇Font class 這一個。（不會就看使用步驟）
程式碼如下：
// 1. 在mian.js中引入 iconfont.css
import '@/assets/iconfont/font_4747698_sfed2xgfhfc/iconfont.css'
// 2. 可以直接使用
<div>
<i class="iconfont icon-jianli"></i>
</div>
- 有色圖示
有色圖示使用 --- 選擇Symbol 這一個。（不會就看使用步驟） -- 注意這個是引入js!!!!!!!!!!!!!!!!!!!!
程式碼如下：
// 1. 在mian.js中引入 iconfont.js
import '@/assets/iconfont/font_4747698_sfed2xgfhfc/iconfont.js'
// 2. 可以直接使用
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shejiaotubiao-06"></use>
</svg>
</div>
可以看一下這個使用步驟這裡： -- 這裡的第一步 其實就是iconfont.js的引入；
-- 這裡的第二部，其實是對這個有色圖示的一個樣式的設定，不加這個的話，有色圖示一引入會非常的大，加上之後會變得和正常的一樣小，看自己，加不加都無所謂
-- 這裡的第三步， 是使用有色圖示，如果你想使用他給你設定好的這個樣式，也就是第二個步驟的樣式，你直接給<svg>標籤加上這個類即可。
