layui图标:
layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)
通过对一个内联元素(一般推荐用 i标签)设定 class=“layui-icon”,来定义一个图标,然后对元素加上图标对应的 font-class(注意:layui 2.3.0 之前只支持采用 unicode 字符),即可显示出你想要的图标
从 layui 2.3.0 开始,支持 font-class 的形式定义图标:
<i class="layui-icon layui-icon-face-smile"></i>
注意:在 layui 2.3.0 之前的版本,只能设置 unicode 来定义图标
<i class="layui-icon"></i>
其中的 即是图标对应的 unicode 字符
你可以去定义它的颜色或者大小,如:
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
自定义阿里巴巴矢量图标库:
1、把阿里巴巴图标的图标代码下载到本地解压。
使用方法
1、Unicode方法
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
第三步:定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第四步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">3</span>
2、Font class 方法
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>
3、Symbol 引用
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
注意:Unicode和Font class由于使用的是字体方式引入,所以只支持单色 ,Symbo支持多色彩(但兼容性较差,支持 IE9+,及现代浏览器。 浏览器渲染 SVG 的性能一般,还不如 png)