layui添加阿里巴巴图标库

peashooters

已于 2022-09-14 15:45:49 修改

阅读量1.2w

点赞数 4

分类专栏：前端文章标签： layer扩展图标 layui扩展图标

于 2018-11-14 15:15:43 首次发布

本文链接：https://blog.csdn.net/Acinek/article/details/84065652

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

layui是一款不错的前端框架，其官网上展示的图标有140个，当不够用的时候，我们就需要去扩展它的图标样式，今天为大家带来扩展方法，扩展后我们可以和layer官网中的示例一样，使用样式来生成图标。如下：

（layui-icon-category为扩展的样式）

layer官网存在的图标:
<i class="layui-icon layui-icon-rate-solid"></i> 
本文作者扩展图标:
<i class="layui-icon layui-icon-category"></i>

第一步：

首先我们创建一个Demo(编程工具：HBuilder)，写完后作者将上传到百度云。Demo结构如下：

第二步：

添加layer图标在页面上，body代码如下：

(“从 layui 2.3.0 开始，支持 font-class 的形式定义图标”，引用自layer官网)

(layui-icon是所有图标都要写的样式)

(样式 layui-icon-rate-solid 是已经存在的图标，layui-icon-category是即将扩展的图标，样式font是为了将图标变大，便于观察)

<body>
	<center>
	
		<i class="layui-icon layui-icon-rate-solid font"></i> 
			
		<i class="layui-icon layui-icon-category font"></i> 
			
	</center>
</body>

样式font代码如下（无关与扩展样式步骤，贴出来是为了说明font不影响扩展）：

body .font{font-size: 100px;margin-right: 50px;color:#7B7B7B ;}

第三步：

找一个想要扩展的样式。

（“layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）”，引用自layer官网）

所以我们去阿里巴巴矢量图标库找需要扩展的图标(地址：iconfont-阿里巴巴矢量图标库)

图标找到后，我们就可以下载其代码了步骤如下：

1.把找到的图标收藏进入购物车

2.找到收藏的图标，并下载其代码

3.解压下载的文件夹

第四步：

开始制作扩展图标样式。

打开iconfont.css文件，复制其代码到自己的扩展css文件中

贴上此时咱们的扩展css样式文件代码：

/*阿里图标素材代码*/
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1542177834860'); /* IE9*/
  src: url('iconfont.eot?t=1542177834860#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQgAAsAAAAABmwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8/Eh4Y21hcAAAAYAAAABLAAABcOeutzxnbHlmAAABzAAAAHAAAABwsYv8TmhlYWQAAAI8AAAALAAAADYTQg5raGhlYQAAAmgAAAAcAAAAJAfeA4NobXR4AAAChAAAAAgAAAAICAAAAGxvY2EAAAKMAAAABgAAAAYAOAAAbWF4cAAAApQAAAAeAAAAIAENADBuYW1lAAACtAAAAUUAAAJtPlT+fXBvc3QAAAP8AAAAJAAAADX6T07XeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByetT1rY27438AQw9zA0AAUZgTJAQDyFQzveJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf9b2/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBwpQuBAAABAAAAAAN8AxoAIwAACQEmIgcBBh4BMj8BERQWOwEyNjU3MxUUFjsBMjY1ERcWMjY0A3T+jwcVB/6NBwEOFQchDgqsCg4BxA4LqwoPIQcUDwGOAYQHB/58BxQOByP+jwoPDgv29goPDwoBcSMHDhR4nGNgZGBgAOKpx4RU4/ltvjJwszCAwA3Bp1rINAsDsxSQ4mBgAvEA7cAHXnicY2BkYGBu+N/AEMPCAAJAkpEBFTABAEcIAmsEAAAABAAAAAAAAAAAOAAAeJxjYGRgYGBiUGEA0SAWAwMXEDIw/AfzGQAMGwE+AAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICJkYmRmYE7Iz83VTc5IzU5u4KBAQAlkgRt') format('woff'),
  url('iconfont.ttf?t=1542177834860') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1542177834860#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-home-checkx:before { content: "\e686"; }


/*为了便于观察 本页面使用的样式*/
body{padding-top: 300px;}
body .font{font-size: 100px;margin-right: 50px;color:#7B7B7B ;}

到这里的时候，咱们在页面上其实已经可以使用图标了，只不过样式没有使用layer的而已。咱们先看看效果怎么样

贴上此时的body部分代码：

<body>
	<center>
			
		<i class="layui-icon layui-icon-rate-solid font"></i> 
			
		<i class="iconfont icon-home-checkx font"></i> 
			
	</center>
</body>

第五步：

将样式名更改为layer格式样式

1.将@font-face中的font-family值改为layui-icon，引用文件路径改为layui中对应的文件

2.删除.iconfont 样式代码

3.将样式icon-home-checkx重命名为layui-icon-category

贴上index.css的最终代码

/*阿里图标素材代码*/

/*
 * 将其中的iconfont 改为layui-icon，文件改为layer中对应文件
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1542177834860'); 
  src: url('iconfont.eot?t=1542177834860#iefix') format('embedded-opentype'), 
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQgAAsAAAAABmwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8/Eh4Y21hcAAAAYAAAABLAAABcOeutzxnbHlmAAABzAAAAHAAAABwsYv8TmhlYWQAAAI8AAAALAAAADYTQg5raGhlYQAAAmgAAAAcAAAAJAfeA4NobXR4AAAChAAAAAgAAAAICAAAAGxvY2EAAAKMAAAABgAAAAYAOAAAbWF4cAAAApQAAAAeAAAAIAENADBuYW1lAAACtAAAAUUAAAJtPlT+fXBvc3QAAAP8AAAAJAAAADX6T07XeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByetT1rY27438AQw9zA0AAUZgTJAQDyFQzveJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf9b2/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBwpQuBAAABAAAAAAN8AxoAIwAACQEmIgcBBh4BMj8BERQWOwEyNjU3MxUUFjsBMjY1ERcWMjY0A3T+jwcVB/6NBwEOFQchDgqsCg4BxA4LqwoPIQcUDwGOAYQHB/58BxQOByP+jwoPDgv29goPDwoBcSMHDhR4nGNgZGBgAOKpx4RU4/ltvjJwszCAwA3Bp1rINAsDsxSQ4mBgAvEA7cAHXnicY2BkYGBu+N/AEMPCAAJAkpEBFTABAEcIAmsEAAAABAAAAAAAAAAAOAAAeJxjYGRgYGBiUGEA0SAWAwMXEDIw/AfzGQAMGwE+AAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICJkYmRmYE7Iz83VTc5IzU5u4KBAQAlkgRt') format('woff'),
  url('iconfont.ttf?t=1542177834860') format('truetype'), 
  url('iconfont.svg?t=1542177834860#iconfont') format('svg');
}
*/
@font-face {font-family: "layui-icon";
  src: url('../layui/font/iconfont.eot?t=1542177834860'); 
  src: url('./layui/font/iconfont.eot?t=1542177834860#iefix') format('embedded-opentype'), 
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQgAAsAAAAABmwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8/Eh4Y21hcAAAAYAAAABLAAABcOeutzxnbHlmAAABzAAAAHAAAABwsYv8TmhlYWQAAAI8AAAALAAAADYTQg5raGhlYQAAAmgAAAAcAAAAJAfeA4NobXR4AAAChAAAAAgAAAAICAAAAGxvY2EAAAKMAAAABgAAAAYAOAAAbWF4cAAAApQAAAAeAAAAIAENADBuYW1lAAACtAAAAUUAAAJtPlT+fXBvc3QAAAP8AAAAJAAAADX6T07XeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByetT1rY27438AQw9zA0AAUZgTJAQDyFQzveJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf9b2/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBwpQuBAAABAAAAAAN8AxoAIwAACQEmIgcBBh4BMj8BERQWOwEyNjU3MxUUFjsBMjY1ERcWMjY0A3T+jwcVB/6NBwEOFQchDgqsCg4BxA4LqwoPIQcUDwGOAYQHB/58BxQOByP+jwoPDgv29goPDwoBcSMHDhR4nGNgZGBgAOKpx4RU4/ltvjJwszCAwA3Bp1rINAsDsxSQ4mBgAvEA7cAHXnicY2BkYGBu+N/AEMPCAAJAkpEBFTABAEcIAmsEAAAABAAAAAAAAAAAOAAAeJxjYGRgYGBiUGEA0SAWAwMXEDIw/AfzGQAMGwE+AAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICJkYmRmYE7Iz83VTc5IzU5u4KBAQAlkgRt') format('woff'),
  url('./layui/font/iconfont.ttf?t=1542177834860') format('truetype'), 
  url('./layui/font/iconfont.svg?t=1542177834860#iconfont') format('svg');
}


/*
 * 删除这部分代码
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*/

/*
 * 这段代码替换为.layui-icon-category:before { content: "\e686"; }
.icon-home-checkx:before { content: "\e686"; }
 */
.layui-icon-category:before { content: "\e686"; }


/*为了便于观察 本页面使用的样式*/
body{padding-top: 300px;}
body .font{font-size: 100px;margin-right: 50px;color:#7B7B7B ;}

贴上最终效果：

index的页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<center>
			
			<i class="layui-icon layui-icon-rate-solid font"></i> 
			
			<i class="layui-icon layui-icon-category font"></i> 
			
		</center>
	</body>
</html>

本次讲解的demo资料（百度云盘）：

链接：https://pan.baidu.com/s/128X7MS26ge9ko387QhVL7A
提取码：3i4f

peashooters

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
layui添加阿里巴巴图标库

前言：layui是一款不错的前端框架，其官网上展示的图标有140个，当不够用的时候，我们就需要去扩展它的图标样式，今天为大家带来扩展方法，扩展后我们可以和layer官网中的示例一样，使用样式来生成图标。如下：（layui-icon-category为扩展的样式）layer官网存在的图标:&lt;i class="layui-icon layui-icon-rate-solid"&...
复制链接

扫一扫

专栏目录