发表主题您当前位置:首页 / 分享 / 设计/VI/UI

layui内置图标一览表(140个)

jaes  2018-12-25  0  0  69

使用方式

通过对一个内联元素(一般推荐用 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>
内置图标一览表(140个)
  • 半星
    &#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
  • 添加-圆圈
    &#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
说明:该主题及内容可以随意免费转发,但转发时请注明来源于“哈喽吧”哦^_^。

回复主题

上一篇:简单了解下PHOTOSHOP(PS)和CorelDRAW(CDR)的区别

下一篇:没有了

最新回复(0)

暂无回复
回复主题
提示:请先登录后再回复主题。
  • 站内搜索
  • 百度搜索
  • 搜狗搜索