_
caseBanner
当前位置:首页 > 新闻资讯
layui图标和自定义矢量库图标的使用
发布时间:2021-02-23 17:09:18 浏览: 176次 来源:【jake推荐】 作者:-=Jake=-

layui图标:

layui的所有图标均为字体形式,该字体源自阿里巴巴矢量图标库(iconfont)

通过为内联元素设置class =“ layui-icon”来定义图标(通常建议使用i标签)秒速快三贝搏APP ,然后将与该图标相对应的字体类添加到元素中(注意:layui 2. 3. 0之前仅支持Unicode字符)pc28蛋蛋 ,您可以显示所需的图标

从 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方法

第1步:导入在项目下生成的fontclass代码:

<link rel="stylesheet" href="./iconfont.css">

第2步:复制在项目下生成的@ 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');
}

三星涉及领域_涉及 领域图标_混沌领域图标

第3步:定义使用图标字体的样式

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

第4步:选择相应的图标并获取字体代码电竞下注app ,将其应用于页面

<span class="iconfont">&#x33;

2、字体类方法

第1步:导入在项目下生成的fontclass代码:

<link rel="stylesheet" href="./iconfont.css">

第2步:选择相应的图标并获取班级名称,将其应用于页面:

<span class="iconfont icon-xxx"></span>

3、符号参考

涉及 领域图标_三星涉及领域_混沌领域图标

第1步:导入在项目下生成的符号代码:

<script src="./iconfont.js"></script>

步骤2:添加通用CSS代码(引入一次):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第3步:选择相应的图标并获取班级名称,将其应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

注意:由于引入了字体涉及 领域图标涉及 领域图标真人游戏 ,Unicode和Font类仅支持单色,而Symbo支持多种颜色(但兼容性差,支持IE9 +和现代浏览器。呈现SVG的浏览器的性能中等,不如png)

返回列表
二维码
扫一扫,在线询价