vue项目引入字体图标iconfont
生活随笔
收集整理的這篇文章主要介紹了
vue项目引入字体图标iconfont
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
直接將icon下載成圖片使用,看此篇
一、登入阿里字體圖標(biāo)庫
選擇圖標(biāo)加入購物車
下載代碼:
解壓后,將除了html的文件都復(fù)制一份到自己項目assets下:
二、點擊打開之前解壓的html文件
推薦使用Font class引入字體圖標(biāo):
三、main.sj下引入字體圖標(biāo)樣式:
四、按照html的方法使用:
方案1:通過Font class引入字體圖標(biāo),類名修改字體圖標(biāo)的大小和顏色(推薦此方法:可改變圖標(biāo)大小和顏色)
步驟:1.先使用<span class="iconfont icon-類名"></span>引入;2.再通過對應(yīng)class類名修改css樣式;
方案2:使用Symbol 引用(此方法,svg對于原圖標(biāo)有顏色的,會自動帶入顏色,同時修改不了其顏色;對于無顏色的圖標(biāo),可修改顏色;)
步驟:1.先在app.vue下引入通用 CSS 代碼(引入一次就行);2.在對應(yīng)頁面的下使用svg引入圖標(biāo);3.添加類名修改圖標(biāo)樣式
通用 CSS 代碼:
<style> .icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; } </style>svg代碼:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-類名"></use> </svg>總結(jié)
以上是生活随笔為你收集整理的vue项目引入字体图标iconfont的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: PyQt5应用与实践
- 下一篇: vue的slot作用域插槽使用案例