学无先后,达者为师

网站首页 编程语言 正文

uni ui 、color ui 图标icon的使用

作者:.木角斗. 更新时间: 2022-09-22 编程语言

​​​​​​uni ui 中使用icon 


    通过HBuirder 直接创建的uni ui项目,可以直接使用 uni-icons
    如果创建时没有引入uni ui需要另外安装uni ui.....
    
    Icons Props:属性

size 大小
type 图标图案
color 图标颜色
customPrefix 自定义图标


    Events:事件

@click 点击事件
<uni-icons type="contact" size="30"	color="red" ></uni-icons>

效果:

如果uni ui图标库中没有你想要的图标

方法:
    使用 custom-prefix 和 type 属性自定义图标
    
    步骤:
    1. 在阿里图标库找到想要的图标,添加至项目,下载代码


    2. 将下载的代码保留 .css 和 .tff 两个文件,放到项目中static下面

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


@font-face {
	font-family: "iconfont"; 
    src: url('/static/css/iconfont.ttf') format('truetype');
    /* 路径一定要写对 */
}

/*  
@font-face 中的font-family: "iconfont";	
与下面的设置字体族一致, custom-prefix="字体族名" 
*/
.iconfont {
	 font-family: "iconfont" !important;
}
/* 或者 */
.customicons {
	 font-family: "customicons" !important;
}


<!-- 当字体族为customicons,iconfont,custom-icon ;     
type为 .css文件中的样式名,阿里图标库中的font-class-->

<uni-icons type="icon-weizhi" custom-prefix="customicons" ></uni-icons>
<uni-icons type="icon-weizhi" custom-prefix="iconfont" ></uni-icons>
	 
<!--
uni ui的自带图标库 
同一个图标有 线/面 两种样式
例如:wallet  	wallet-filled
-->
<uni-icons type="wallet"  ></uni-icons>
<uni-icons type="wallet-filled"  ></uni-icons>

color ui 中使用 icon 

下载color ui项目包,在statc下找到css文件,拷贝到我的项目中

 在app.vue中引入,可按需引入

运行color ui,找到需要的icon

 打开color ui 项目找到我们需要的代码直接复制

 找到相应的icon 名字,直接使用

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

如果color ui 中也没有你需要的 icon 

去阿里图标库下载,引入,同上uni ui

通过colo ui 的方法使用阿里图标库的图标:


<!-- 
icon-bianjishuru: 图标css文件中的样式名
iconfont: 图标css文件中设置的字体族
-->
<text class=" icon-bianjishuru iconfont" ></text>

原文链接:https://blog.csdn.net/m0_65392968/article/details/126964120

栏目分类
最近更新