layui/docs/icon/index.md
2023-09-12 17:38:46 +08:00

44 KiB
Raw Blame History

title toc
图标 true

图标

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

示例

  <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 个)

Github
&#xe6a7;
layui-icon-github
月亮
&#xe6c2;
layui-icon-moon
错误
&#xe693;
layui-icon-error
成功
&#xe697;
layui-icon-success
问号
&#xe699;
layui-icon-question
锁定
&#xe69a;
layui-icon-lock
显示
&#xe695;
layui-icon-eye
隐藏
&#xe696;
layui-icon-eye-invisible
清空/删除
&#xe788;
layui-icon-clear
退格
&#xe694;
layui-icon-backspace
禁用
&#xe6cc;
layui-icon-disabled
感叹号/提示
&#xeb2e;
layui-icon-tips-fill
测试/K线图
&#xe692;
layui-icon-test
音乐/音符
&#xe690;
layui-icon-music
Chrome
&#xe68a;
layui-icon-chrome
Firefox
&#xe686;
layui-icon-firefox
Edge
&#xe68b;
layui-icon-edge
IE
&#xe7bb;
layui-icon-ie
实心
&#xe68f;
layui-icon-heart-fill
空心
&#xe68c;
layui-icon-heart
太阳/明亮
&#xe748;
layui-icon-light
时间/历史
&#xe68d;
layui-icon-time
蓝牙
&#xe689;
layui-icon-bluetooth
@艾特
&#xe687;
layui-icon-at
静音
&#xe685;
layui-icon-mute
录音/麦克风
&#xe6dc;
layui-icon-mike
密钥/钥匙
&#xe683;
layui-icon-key
礼物/活动
&#xe627;
layui-icon-gift
邮箱
&#xe618;
layui-icon-email
RSS
&#xe808;
layui-icon-rss
WiFi
&#xe7e0;
layui-icon-wifi
退出/注销
&#xe682;
layui-icon-logout
Android 安卓
&#xe684;
layui-icon-android
Apple IOS 苹果
&#xe680;
layui-icon-ios
Windows
&#xe67f;
layui-icon-windows
穿梭框
&#xe691;
layui-icon-transfer
客服
&#xe626;
layui-icon-service
&#xe67e;
layui-icon-subtraction
&#xe624;
layui-icon-addition
滑块
&#xe714;
layui-icon-slider
打印
&#xe66d;
layui-icon-print
导出
&#xe67d;
layui-icon-export
&#xe610;
layui-icon-cols
退出全屏
&#xe758;
layui-icon-screen-restore
全屏
&#xe622;
layui-icon-screen-full
半星
&#xe6c9;
layui-icon-rate-half
星星-空心
&#xe67b;
layui-icon-rate
星星-实心
&#xe67a;
layui-icon-rate-solid
手机
&#xe678;
layui-icon-cellphone
验证码
&#xe679;
layui-icon-vercode
微信
&#xe677;
layui-icon-login-wechat
QQ
&#xe676;
layui-icon-login-qq
微博
&#xe675;
layui-icon-login-weibo
密码
&#xe673;
layui-icon-password
用户名
&#xe66f;
layui-icon-username
刷新-粗
&#xe9aa;
layui-icon-refresh-3
授权
&#xe672;
layui-icon-auz
左向右伸缩菜单
&#xe66b;
layui-icon-spread-left
右向左伸缩菜单
&#xe668;
layui-icon-shrink-right
雪花
&#xe6b1;
layui-icon-snowflake
提示说明
&#xe702;
layui-icon-tips
便签
&#xe66e;
layui-icon-note
主页
&#xe68e;
layui-icon-home
高级
&#xe674;
layui-icon-senior
刷新
&#xe669;
layui-icon-refresh
刷新
&#xe666;
layui-icon-refresh-1
旗帜
&#xe66c;
layui-icon-flag
主题
&#xe66a;
layui-icon-theme
消息-通知
&#xe667;
layui-icon-notice
网站
&#xe7ae;
layui-icon-website
控制台
&#xe665;
layui-icon-console
表情-惊讶
&#xe664;
layui-icon-face-surprised
设置-空心
&#xe716;
layui-icon-set
模板
&#xe656;
layui-icon-template-1
应用
&#xe653;
layui-icon-app
模板
&#xe663;
layui-icon-template
&#xe6c6;
layui-icon-praise
&#xe6c5;
layui-icon-tread
&#xe662;
layui-icon-male
&#xe661;
layui-icon-female
相机-空心
&#xe660;
layui-icon-camera
相机-实心
&#xe65d;
layui-icon-camera-fill
菜单-水平
&#xe65f;
layui-icon-more
菜单-垂直
&#xe671;
layui-icon-more-vertical
金额-人民币
&#xe65e;
layui-icon-rmb
金额-美元
&#xe659;
layui-icon-dollar
钻石-等级
&#xe735;
layui-icon-diamond
&#xe756;
layui-icon-fire
返回
&#xe65c;
layui-icon-return
位置-地图
&#xe715;
layui-icon-location
办公-阅读
&#xe705;
layui-icon-read
调查
&#xe6b2;
layui-icon-survey
表情-微笑
&#xe6af;
layui-icon-face-smile
表情-哭泣
&#xe69c;
layui-icon-face-cry
购物车
&#xe698;
layui-icon-cart-simple
购物车
&#xe657;
layui-icon-cart
下一页
&#xe65b;
layui-icon-next
上一页
&#xe65a;
layui-icon-prev
上传-空心-拖拽
&#xe681;
layui-icon-upload-drag
上传-实心
&#xe67c;
layui-icon-upload
下载-圆圈
&#xe601;
layui-icon-download-circle
组件
&#xe857;
layui-icon-component
文件-粗
&#xe655;
layui-icon-file-b
用户
&#xe770;
layui-icon-user
发现-实心
&#xe670;
layui-icon-find-fill
loading
&#xe63d;
layui-icon-loading
loading
&#xe63e;
layui-icon-loading-1
添加
&#xe654;
layui-icon-add-1
播放
&#xe652;
layui-icon-play
暂停
&#xe651;
layui-icon-pause
音频-耳机
&#xe6fc;
layui-icon-headset
视频
&#xe6ed;
layui-icon-video
语音-声音
&#xe688;
layui-icon-voice
消息-通知-喇叭
&#xe645;
layui-icon-speaker
删除线
&#xe64f;
layui-icon-fonts-del
代码
&#xe64e;
layui-icon-fonts-code
HTML
&#xe64b;
layui-icon-fonts-html
字体加粗
&#xe62b;
layui-icon-fonts-strong
删除链接
&#xe64d;
layui-icon-unlink
图片
&#xe64a;
layui-icon-picture
链接
&#xe64c;
layui-icon-link
表情-笑-粗
&#xe650;
layui-icon-face-smile-b
左对齐
&#xe649;
layui-icon-align-left
右对齐
&#xe648;
layui-icon-align-right
居中对齐
&#xe647;
layui-icon-align-center
字体-下划线
&#xe646;
layui-icon-fonts-u
字体-斜体
&#xe644;
layui-icon-fonts-i
Tabs 选项卡
&#xe62a;
layui-icon-tabs
单选框-选中
&#xe643;
layui-icon-radio
单选框-候选
&#xe63f;
layui-icon-circle
编辑
&#xe642;
layui-icon-edit
分享
&#xe641;
layui-icon-share
删除
&#xe640;
layui-icon-delete
表单
&#xe63c;
layui-icon-form
手机-细体
&#xe63b;
layui-icon-cellphone-fine
聊天 对话 沟通
&#xe63a;
layui-icon-dialogue
文字格式化
&#xe639;
layui-icon-fonts-clear
窗口
&#xe638;
layui-icon-layer
日期
&#xe637;
layui-icon-date
水 下雨
&#xe636;
layui-icon-water
代码-圆圈
&#xe635;
layui-icon-code-circle
轮播组图
&#xe634;
layui-icon-carousel
翻页
&#xe633;
layui-icon-prev-circle
布局
&#xe632;
layui-icon-layouts
工具
&#xe631;
layui-icon-util
选择模板
&#xe630;
layui-icon-templeate-1
上传-圆圈
&#xe62f;
layui-icon-upload-circle
&#xe62e;
layui-icon-tree
表格
&#xe62d;
layui-icon-table
图表
&#xe62c;
layui-icon-chart
图标 报表 屏幕
&#xe629;
layui-icon-chart-screen
引擎
&#xe628;
layui-icon-engine
下三角
&#xe625;
layui-icon-triangle-d
右三角
&#xe623;
layui-icon-triangle-r
文件
&#xe621;
layui-icon-file
设置-小型
&#xe620;
layui-icon-set-sm
减少-圆圈
&#xe616;
layui-icon-reduce-circle
添加-圆圈
&#xe61f;
layui-icon-add-circle
404
&#xe61c;
layui-icon-404
关于
&#xe60b;
layui-icon-about
箭头 向上
&#xe619;
layui-icon-up
箭头 向下
&#xe61a;
layui-icon-down
箭头 向左
&#xe603;
layui-icon-left
箭头 向右
&#xe602;
layui-icon-right
圆点
&#xe617;
layui-icon-circle-dot
搜索
&#xe615;
layui-icon-search
设置-实心
&#xe614;
layui-icon-set-fill
群组
&#xe613;
layui-icon-group
好友
&#xe612;
layui-icon-friends
回复 评论 实心
&#xe611;
layui-icon-reply-fill
菜单 隐身 实心
&#xe60f;
layui-icon-menu-fill
记录
&#xe60e;
layui-icon-log
图片-细体
&#xe60d;
layui-icon-picture-fine
表情-笑-细体
&#xe60c;
layui-icon-face-smile-fine
列表
&#xe60a;
layui-icon-list
发布 纸飞机
&#xe609;
layui-icon-release
对 OK
&#xe605;
layui-icon-ok
帮助
&#xe607;
layui-icon-help
客服
&#xe606;
layui-icon-chat
top 置顶
&#xe604;
layui-icon-top
收藏-空心
&#xe600;
layui-icon-star
收藏-实心
&#xe658;
layui-icon-star-fill
关闭-实心
&#x1007;
layui-icon-close-fill
关闭-空心
&#x1006;
layui-icon-close
正确
&#x1005;
layui-icon-ok-circle
添加-圆圈-细体
&#xe608;
layui-icon-add-circle-fine

跨域处理

由于浏览器存在同源策略,若 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>