技術標籤：前端

簡介

  layui 的所有圖示全部採用字型形式，取材於阿里巴巴向量圖示庫（iconfont）。

1. 可以通過 font-class 或 unicode 來定義不同的圖示。
2. 可以把一個 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>