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