前言:
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