> layui 的所有圖標(biāo)全部采用字體形式,取材于阿里巴巴矢量圖標(biāo)庫(iconfont.cn)。因此你可以把一個 icon 看作是一個普通的文字,這意味著你直接用 css 控制文字屬性,如 color、font-size,就可以改變圖標(biāo)的顏色和大小。 #### 1. Layui官方CDN (測試功能使用CDN就行,不用在下載layui到本地,這樣就麻煩了) --- https://www.layuicdn.com **字體圖標(biāo)顯示,引入css就足夠了,無需引入 layui.js,使用到模塊時才必須引入js文件** ``` <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"> ``` #### 2. 使用方式 --- 推薦對 `i` 標(biāo)簽設(shè)定 `class="layui-icon"` 來定義圖標(biāo) 然后對 `i` 標(biāo)簽加上圖標(biāo)對應(yīng)的 `字體類名` 或 `unicode 字符`,即可顯示出字體圖標(biāo) **字體圖標(biāo)容器** ```html <i class="layui-icon"></i> ``` **字體圖標(biāo)沒在容器中時則會被解析成HTML預(yù)留的字符實體,而不是layui的字體圖標(biāo),所以瀏覽器上將顯示為一個方框** ```html <i class="layui-icon-fire"></i>  ``` **正確使用:放入字體圖標(biāo)容器標(biāo)簽** ```html <i class="layui-icon layui-icon-fire"></i> <i class="layui-icon"></i> ``` #### 3. 因為是字體圖標(biāo)(圖標(biāo)本質(zhì)是字體),所以可以通過css修改圖標(biāo)樣式 --- ```html <i class="layui-icon layui-icon-fire" style="color:red;font-size:25px;"></i> ```