mirror of https://github.com/layui/layui
44 KiB
44 KiB
| title | toc |
|---|---|
| 图标 | true |
图标
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 个）
Github

layui-icon-github
月亮

layui-icon-moon
错误

layui-icon-error
成功

layui-icon-success
问号

layui-icon-question
锁定

layui-icon-lock
显示

layui-icon-eye
隐藏

layui-icon-eye-invisible
清空/删除

layui-icon-clear
退格

layui-icon-backspace
禁用

layui-icon-disabled
感叹号/提示

layui-icon-tips-fill
测试/K线图

layui-icon-test
音乐/音符

layui-icon-music
Chrome

layui-icon-chrome
Firefox

layui-icon-firefox
Edge

layui-icon-edge
IE

layui-icon-ie
实心

layui-icon-heart-fill
空心

layui-icon-heart
太阳/明亮

layui-icon-light
时间/历史

layui-icon-time
蓝牙

layui-icon-bluetooth
@艾特

layui-icon-at
静音

layui-icon-mute
录音/麦克风

layui-icon-mike
密钥/钥匙

layui-icon-key
礼物/活动

layui-icon-gift
邮箱

layui-icon-email
RSS

layui-icon-rss
WiFi

layui-icon-wifi
退出/注销

layui-icon-logout
Android 安卓

layui-icon-android
Apple IOS 苹果

layui-icon-ios
Windows

layui-icon-windows
穿梭框

layui-icon-transfer
客服

layui-icon-service
减

layui-icon-subtraction
加

layui-icon-addition
滑块

layui-icon-slider
打印

layui-icon-print
导出

layui-icon-export
列

layui-icon-cols
退出全屏

layui-icon-screen-restore
全屏

layui-icon-screen-full
半星

layui-icon-rate-half
星星-空心

layui-icon-rate
星星-实心

layui-icon-rate-solid
手机

layui-icon-cellphone
验证码

layui-icon-vercode
微信

layui-icon-login-wechat
QQ

layui-icon-login-qq
微博

layui-icon-login-weibo
密码

layui-icon-password
用户名

layui-icon-username
刷新-粗

layui-icon-refresh-3
授权

layui-icon-auz
左向右伸缩菜单

layui-icon-spread-left
右向左伸缩菜单

layui-icon-shrink-right
雪花

layui-icon-snowflake
提示说明

layui-icon-tips
便签

layui-icon-note
主页

layui-icon-home
高级

layui-icon-senior
刷新

layui-icon-refresh
刷新

layui-icon-refresh-1
旗帜

layui-icon-flag
主题

layui-icon-theme
消息-通知

layui-icon-notice
网站

layui-icon-website
控制台

layui-icon-console
表情-惊讶

layui-icon-face-surprised
设置-空心

layui-icon-set
模板

layui-icon-template-1
应用

layui-icon-app
模板

layui-icon-template
赞

layui-icon-praise
踩

layui-icon-tread
男

layui-icon-male
女

layui-icon-female
相机-空心

layui-icon-camera
相机-实心

layui-icon-camera-fill
菜单-水平

layui-icon-more
菜单-垂直

layui-icon-more-vertical
金额-人民币

layui-icon-rmb
金额-美元

layui-icon-dollar
钻石-等级

layui-icon-diamond
火

layui-icon-fire
返回

layui-icon-return
位置-地图

layui-icon-location
办公-阅读

layui-icon-read
调查

layui-icon-survey
表情-微笑

layui-icon-face-smile
表情-哭泣

layui-icon-face-cry
购物车

layui-icon-cart-simple
购物车

layui-icon-cart
下一页

layui-icon-next
上一页

layui-icon-prev
上传-空心-拖拽

layui-icon-upload-drag
上传-实心

layui-icon-upload
下载-圆圈

layui-icon-download-circle
组件

layui-icon-component
文件-粗

layui-icon-file-b
用户

layui-icon-user
发现-实心

layui-icon-find-fill
loading

layui-icon-loading
loading

layui-icon-loading-1
添加

layui-icon-add-1
播放

layui-icon-play
暂停

layui-icon-pause
音频-耳机

layui-icon-headset
视频

layui-icon-video
语音-声音

layui-icon-voice
消息-通知-喇叭

layui-icon-speaker
删除线

layui-icon-fonts-del
代码

layui-icon-fonts-code
HTML

layui-icon-fonts-html
字体加粗

layui-icon-fonts-strong
删除链接

layui-icon-unlink
图片

layui-icon-picture
链接

layui-icon-link
表情-笑-粗

layui-icon-face-smile-b
左对齐

layui-icon-align-left
右对齐

layui-icon-align-right
居中对齐

layui-icon-align-center
字体-下划线

layui-icon-fonts-u
字体-斜体

layui-icon-fonts-i
Tabs 选项卡

layui-icon-tabs
单选框-选中

layui-icon-radio
单选框-候选

layui-icon-circle
编辑

layui-icon-edit
分享

layui-icon-share
删除

layui-icon-delete
表单

layui-icon-form
手机-细体

layui-icon-cellphone-fine
聊天 对话 沟通

layui-icon-dialogue
文字格式化

layui-icon-fonts-clear
窗口

layui-icon-layer
日期

layui-icon-date
水 下雨

layui-icon-water
代码-圆圈

layui-icon-code-circle
轮播组图

layui-icon-carousel
翻页

layui-icon-prev-circle
布局

layui-icon-layouts
工具

layui-icon-util
选择模板

layui-icon-templeate-1
上传-圆圈

layui-icon-upload-circle
树

layui-icon-tree
表格

layui-icon-table
图表

layui-icon-chart
图标 报表 屏幕

layui-icon-chart-screen
引擎

layui-icon-engine
下三角

layui-icon-triangle-d
右三角

layui-icon-triangle-r
文件

layui-icon-file
设置-小型

layui-icon-set-sm
减少-圆圈

layui-icon-reduce-circle
添加-圆圈

layui-icon-add-circle
404

layui-icon-404
关于

layui-icon-about
箭头 向上

layui-icon-up
箭头 向下

layui-icon-down
箭头 向左

layui-icon-left
箭头 向右

layui-icon-right
圆点

layui-icon-circle-dot
搜索

layui-icon-search
设置-实心

layui-icon-set-fill
群组

layui-icon-group
好友

layui-icon-friends
回复 评论 实心

layui-icon-reply-fill
菜单 隐身 实心

layui-icon-menu-fill
记录

layui-icon-log
图片-细体

layui-icon-picture-fine
表情-笑-细体

layui-icon-face-smile-fine
列表

layui-icon-list
发布 纸飞机

layui-icon-release
对 OK

layui-icon-ok
帮助

layui-icon-help
客服

layui-icon-chat
top 置顶

layui-icon-top
收藏-空心

layui-icon-star
收藏-实心

layui-icon-star-fill
关闭-实心
ဇ
layui-icon-close-fill
关闭-空心
ဆ
layui-icon-close
正确
စ
layui-icon-ok-circle
添加-圆圈-细体

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;
$('.ws-docs-icon > div').on('click', function(){
var iconclass = $(this).find('.docs-icon-fontclass').text();
var copied = copy(iconclass);
if(copied){
layer.msg('已复制 '+ iconclass, {
icon: 1,
offset: '5%',
anim: 'slideDown',
isOutAnim: false
});
}
});
function copy(text){
var textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'absolute';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
var copied = false;
try{
copied = document.execCommand('copy');
}catch(err){
console.log('error', err);
}
textarea.remove();
return copied;
}
});
</script>