vue使用自定義的icon

2021-08-25 08:33:24 字數 933 閱讀 9361

首先因為elementui提供的icon太少了,所有自己找找有沒有向量圖可以引入。

推薦使用阿里爸爸向量圖示管理,iconfont

登入賬號,找到需要的圖示加入購物車

然後新增到專案

開啟html檔案,有使用方法教程

第一步:在index.html引入fontclass**:~ ~

第二步:挑選相應圖示並獲取類名,應用於頁面:~ ~

相容性良好,支援ie8+,及所有現代瀏覽器。

相比於unicode語意明確,書寫更直觀。可以很容易分辨這個icon是什麼。

因為使用class來定義圖示,所以當要替換圖示時,只需要修改class裡面的unicode引用。

不過因為本質上還是使用的字型,所以多色圖示還是不支援的。

第一步:html引入symbol**:

第二步:加入通用css**(引入一次就行):

~ .icon ~

第三步:挑選相應圖示並獲取類名,應用於頁面:~ ~

效果圖:

QMenu自定義icon大小

qmenu預設的icon最大是16px 16px,而且通過stylesheet還改不了。問題癥結 qmenu 使用 qproxystyle 裡面的qstyle pm smalliconsize 解決辦法 1.定義乙個新的style繼承自qproxystyle 替換掉qstyle pm smallic...

vant step步驟條自定義icon

近期使用vant 框架,需要用到步驟條的元件,但是在官網上查詢api,只提供了啟用和未啟用的狀態,但是有的業務場景 待審核 審核通過 審核未通過 完成 如果使用多種狀態,就需要使用插槽v slot,但是官網只提供了api並未提示案例寫法 先一步一步來,按照官網實現乙個簡化版 第一種 vant官網的例...

vue 使用自定義元件

新建專案,ctrl r進入cmd,切換至工作目錄 c users asus f f cd study f study cd vue f study vue cd demo 安裝 vue cli npm install g vue cli?target directory exists.continu...