字体图标 |
您所在的位置:网站首页 › layui字体图标与文字居中 › 字体图标 |
字体图标
layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。 使用方式通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 font-class(注意:layui 2.3.0 之前只支持采用 unicode 字符),即可显示出你想要的图标,譬如: 从 layui 2.3.0 开始,支持 font-class 的形式定义图标: 注意:在 layui 2.3.0 之前的版本,只能设置 unicode 来定义图标 其中的 即是图标对应的 unicode 字符 你可以去定义它的颜色或者大小,如: 内置图标一览表(168个) 实心 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: * layui - 在每一个细节中,用心与你沟通 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |