700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Layui之字体图标

Layui之字体图标

时间:2022-09-21 06:39:13

相关推荐

Layui之字体图标

简介

layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。

可以通过 font-class 或 unicode 来定义不同的图标。可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。

使用方式

使用一个内联元素,对其添加一个 “layui-icon” 的类,来定义一个图标,然后为该元素加上需要使用的图标对应的类名即可。

一般推荐使用 i 标签这个内联元素,当然,使用其他的内联元素标签也可。

其实使用块级元素也可以,但是一般字体图标都是会放在一行,因此都是使用内联元素。

下面是演示代码,类 layui-icon 表示这是个 layui 中的字体图标;而 layui-layui-icon-screen-full 则是表示全屏的字体图标,除了添加类的方式之外,还可以用 unicode 来表示对应的字体图标,如表示的就是全屏字体图标。

<i class="layui-icon layui-icon-screen-full"></i><i class="layui-icon">&#xe622;</i><b class="layui-icon layui-icon-login-qq"></b>

效果:

字体图标对应的类名和unicode值可以到官网文档中查找:字体图标

调整大小和颜色

字体图标被视为字体,因此可以通过CSS属性设置字体一样,对字体图标修改大小和颜色

<i class="layui-icon layui-icon-login-qq" style="font-size: 60px;color: #5FB878;"></i>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。