vue項目中引入阿裡圖示以及顔色大小的調整
- 阿裡圖示庫生成代碼
-
- 1.去阿裡圖示矢量圖示庫将想要的圖示添加入庫
- 2.再去購物車中将圖示添加到項目。
- 3.1将圖示代碼包下載下傳到本地再引入到vue項目中。
-
- 3.1.1解壓放到assets檔案夾下
- 3.1.2 在mian.js中全局引入圖示
- 3.1.3 頁面中使用
- 3.1.4改變圖示大小和顔色
- 3.2将圖示以線上方式引入項目
-
- 3.2.1 在index.html中引入資源
- 3.2.2 頁面中使用
- 3.2.3 改變圖示大小和顔色
由于在使用element-ui的時候，其圖示數量太少，項目需要的又沒有；而且大小幾乎不能調整，于是有了引入其他圖示庫的想法。
阿裡圖示庫生成代碼
1.去阿裡圖示矢量圖示庫将想要的圖示添加入庫
你可以搜尋你需要的圖示的關鍵詞，這樣一個一個圖示去添加又準确又快，不建議你一個一個圖示庫去看，很麻煩，如果你有明确項目需要，建議你用搜尋的方式。
2.再去購物車中将圖示添加到項目。
3.1将圖示代碼包下載下傳到本地再引入到vue項目中。
3.1.1解壓放到assets檔案夾下
3.1.2 在mian.js中全局引入圖示
注意是引用iconfont.css哦
3.1.3 頁面中使用
直接把這樣的代碼放頁面即可，具體使用那個圖示到線上去指派改圖示的代碼到iconfont後面替換即可。
3.1.4改變圖示大小和顔色
改所有圖示大小直接進入你引入的檔案中的iconfont.css中
具體改哪個圖示的大小，直接針對哪個圖示改它的font-size即可，改顔色就增加color屬性即可
3.2将圖示以線上方式引入項目
3.2.1 在index.html中引入資源
找到index.html檔案，引入資源
3.2.2 頁面中使用
直接把這樣的代碼放頁面即可，具體使用那個圖示到線上去指派改圖示的代碼到iconfont後面替換即可。
3.2.3 改變圖示大小和顔色
分為線上修改或者本地修改都可
線上修改的話
本地修改的話可以直接這樣修改
這樣阿裡圖示就導入成功了，如果有疑問，歡迎評論區留言。