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

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

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

效果:
在这里插入图片描述
说明:
1、如果经常新增图标,建议在iconfont上登录账号,然后就可以将新增的图标都添加到一个项目中了,每次修改图标时,就在这个项目中操作,然后下载下来,按上述步骤替换掉原来的文件;
2、我看过有的教程把@font-family给改成了layui-icon,我试过了,发现改变后没什么用,又何必改呢?
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编码为&#58916;

<glyph glyph-name="addition" unicode="&#58916;" d="M544 768L480......
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章