图标

Layui 图标采用字体形式，取材于阿里巴巴矢量图标库 iconfont，因此可以把一个 icon 看作是一个普通的文本，直接通过 css 即可设定其样式。图标支持 font-class 或 unicode 两种格式。

示例

  <i class="layui-icon layui-icon-face-smile"></i> 
<div>
  你可以去定义它的颜色或者大小，如：  
  <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 
</div>
  

通过对一个内联元素（如 <i>标签）添加基础类 class="layui-icon" 来定义一个图标，然后对元素加上图标对应的 font-class，即可显示出你想要的图标，如上所示。

图标列表（186 个）

跨域处理

由于浏览器存在同源策略，若 Layui 文件地址与你当前的页面地址不在同一个域下，即会出现图标跨域问题。因此，要么将 Layui 文件与网站放在同一服务器，要么对 Layui 文件所在的静态资源服务器的 Response Headers 添加：Access-Control-Allow-Origin: * 或对跨资源共享指定域名，即可解决图标跨域问题。

  <script>
  layui.use(function(){
    var $ = layui.jquery;
    var layer = layui.layer;
    var lay = layui.lay;
    var util = layui.util;
    // click
    $('.ws-docs-icon > div').on('click', function(e){
      var elem = $(this);
      var unicodeElem = elem.children('.docs-icon-code')
      var classnameElem = elem.children('.docs-icon-fontclass')
      var text = classnameElem.text();
      var html = text;
      if ($(e.target).is(unicodeElem)) {
        text = unicodeElem.text();
        html = unicodeElem.html();
      }
      lay.clipboard.writeText({
        text: text,
        done: function() {
          layer.msg('已复制 '+ html, {
            icon: 1,
            offset: '5%',
            anim: 'slideDown',
            isOutAnim: false
          });
        }
      });
    });
  });
</script>