在uni-app項目中使用阿里巴巴矢量圖標庫

在uni-app項目中使用阿里巴巴矢量圖標庫

  • 阿里巴巴矢量圖標庫創建一個項目,並選擇需要的圖標添加到該項目中。
  • 下載項目圖標並解壓,將iconfont.ttf文件拷貝到項目的static目錄下。及使用字體圖標,因爲可以動態修改圖標顏色,很方便;svg彩色圖標是好看,但是支持不是很全
  • 在項目根目錄的App.vue文件中進行全局引用:
<style>
/*導入字體圖標*/
@font-face {
	font-family: 'iconfont';
	src: url('~@/static/iconfont.ttf') format('truetype');
}
/*設置字體圖標*/
.iconfont {
	font-family: "iconfont" !important;
	font-size: 1em;
	font-style: normal;
}
</style>
  • 在頁面中隨意使用字體圖標:如果圖標unicode碼不清楚可以在阿里圖標庫中查看或複製
<text class="iconfont">&#xe60c;</text>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章