??????uni ui 中使用icon?

?? ?通過(guò)HBuirder 直接創(chuàng)建的uni ui項(xiàng)目，可以直接使用 uni-icons
?? ?如果創(chuàng)建時(shí)沒(méi)有引入uni ui需要另外安裝uni ui.....
?? ?
?? ?Icons Props：屬性

size	大小
type	圖標(biāo)圖案
color	圖標(biāo)顏色
customPrefix	自定義圖標(biāo)

?? ?Events：事件

@click

點(diǎn)擊事件

<uni-icons type="contact" size="30"	color="red" ></uni-icons>

效果：

如果uni ui圖標(biāo)庫(kù)中沒(méi)有你想要的圖標(biāo)

方法：
?? ?使用 custom-prefix 和 type 屬性自定義圖標(biāo)
?? ?
?? ?步驟：
?? ?1. 在阿里圖標(biāo)庫(kù)找到想要的圖標(biāo)，添加至項(xiàng)目，下載代碼

?? ?2. 將下載的代碼保留 .css 和 .tff 兩個(gè)文件，放到項(xiàng)目中static下面

????????在app.vue中引入iconfont.css文件

@font-face {
	font-family: "iconfont"; 
    src: url('/static/css/iconfont.ttf') format('truetype');
    /* 路徑一定要寫對(duì) */
}

/*  
@font-face 中的font-family: "iconfont";	
與下面的設(shè)置字體族一致， custom-prefix="字體族名" 
*/
.iconfont {
	 font-family: "iconfont" !important;
}
/* 或者 */
.customicons {
	 font-family: "customicons" !important;
}

<!-- 當(dāng)字體族為customicons，iconfont，custom-icon ;     
type為 .css文件中的樣式名，阿里圖標(biāo)庫(kù)中的font-class-->

<uni-icons type="icon-weizhi" custom-prefix="customicons" ></uni-icons>
<uni-icons type="icon-weizhi" custom-prefix="iconfont" ></uni-icons>
	 
<!--
uni ui的自帶圖標(biāo)庫(kù) 
同一個(gè)圖標(biāo)有 線/面 兩種樣式
例如：wallet  	wallet-filled
-->
<uni-icons type="wallet"  ></uni-icons>
<uni-icons type="wallet-filled"  ></uni-icons>

color ui 中使用 icon?

下載color ui項(xiàng)目包，在statc下找到css文件，拷貝到我的項(xiàng)目中

?在app.vue中引入，可按需引入

運(yùn)行color ui，找到需要的icon

?打開(kāi)color ui 項(xiàng)目找到我們需要的代碼直接復(fù)制

?找到相應(yīng)的icon 名字，直接使用

<text class="lg text-gray cuIcon-check" ></text>

如果color ui 中也沒(méi)有你需要的 icon?

去阿里圖標(biāo)庫(kù)下載，引入，同上uni ui

通過(guò)colo ui 的方法使用阿里圖標(biāo)庫(kù)的圖標(biāo)：

<!-- 
icon-bianjishuru: 圖標(biāo)css文件中的樣式名
iconfont： 圖標(biāo)css文件中設(shè)置的字體族
-->
<text class=" icon-bianjishuru iconfont" ></text>