Layui扩展图标，并合并到layui.css

比眉伴天荒 2021-11-05 00:52 773阅读 0赞

> layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

*  Laui内置图标有140个，但实际项目中用到的并不多，此时就需要去阿里巴巴矢量图标库（https://www.iconfont.cn）去下载需要的图标了（建议注册个账号登录）。下载图标可参考Fly社区教程：https://fly.layui.com/jie/9149/。
 *  下载并解压后的目录结构如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwMjA1OTM_size_16_color_FFFFFF_t_70]
 *  合并到layui.css  
    如果每次新增图标都引入新的link肯定使得代码很臃肿，于是就希望将新图标合并到layui.css中，这样只需要引用layui的就可以使用了。步骤如下：  
    1、引入新增图标文件到项目中：![在这里插入图片描述][20190807234616969.png]  
    2、将新增图标文件中的`iconfont.css`文件内容全部复制到`layui.css`中，并修改复制内容中url（即font目录下的新增目录iconfont1）；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwMjA1OTM_size_16_color_FFFFFF_t_70 1]  
    3、测试图标

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<link rel="stylesheet" href="../layui/dist/css/layui.css">
    		<title></title>
    		<style> body{ padding: 10px;} </style>
    	</head>
    	<body>
    		<button class="layui-btn layui-btn-sm">
    			<i class="iconfont icon-jieping"></i>
    		</button>
    	</body>
    </html>

效果：  
![在这里插入图片描述][20190808000321384.png]  
说明：  
1、如果经常新增图标，建议在iconfont上登录账号，然后就可以将新增的图标都添加到一个项目中了，每次修改图标时，就在这个项目中操作，然后下载下来，按上述步骤替换掉原来的文件；  
2、把@font-family的值给改成了layui-icon，就可以将导入的图标也使用类似layui-icon-add的方式了；  
3、.iconfont类中的font-family指向上面的@font-family，表示如果图标用了iconfont类，则会从@font-family中去加载图标，这样可以避免图标与layui中的图标重复。

.iconfont { 
       font-family: "iconfont" !important;
       font-size: 16px;
       font-style: normal;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }

例如：新增图标：

.icon--shang:before { 
      content: "\e624";
    }

但是，layui也有与之相同的content：

.layui-icon-addition:before{ content:"\e624"}

content内容可在iconfont.svg中找到，`\e624`对应unicode编码为``

<glyph glyph-name="addition" unicode="" d="M544 768L480......

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwMjA1OTM_size_16_color_FFFFFF_t_70]: /images/20211104/176370ae98a14d569c8c8219bf39a09e.png
[20190807234616969.png]: /images/20211104/371e04c5cbdb4e99b0de88566a754bfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwMjA1OTM_size_16_color_FFFFFF_t_70 1]: /images/20211104/e6afcc9678c14589a8e4251528067f2d.png
[20190808000321384.png]: /images/20211104/2873f0d948734b39a50c1fdfd7958ae8.png