Layui之字体图标

  layui 的所有图标全部采用字体形式&＃xff0c;取材于阿里巴巴矢量图标库&＃xff08;iconfont&＃xff09;。

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

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

  一般推荐使用 i 标签这个内联元素&＃xff0c;当然&＃xff0c;使用其他的内联元素标签也可。
  其实使用块级元素也可以&＃xff0c;但是一般字体图标都是会放在一行&＃xff0c;因此都是使用内联元素。

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

<i class&＃61;"layui-icon layui-icon-screen-full">i>
<i class&＃61;"layui-icon">&＃xe622;i>
<b class&＃61;"layui-icon layui-icon-login-qq">b>


  效果&＃xff1a;

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

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

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