Layui快速入门之第十二节图标

9月前作者：渊婉分类：Toy博客阅读(32) 违法举报

这篇具有很好参考价值的文章主要介绍了Layui快速入门之第十二节图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一：基本用法

二：图标列表

三：跨域处理

一：基本用法

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，即可显示出你想要的图标，如上所示

二：图标列表

Layui快速入门之第十二节图标,Layui,layui,前端,javascript

Layui快速入门之第十二节图标,Layui,layui,前端,javascript

Layui快速入门之第十二节图标,Layui,layui,前端,javascript

更多图标详情，参照图标地址：图标 - Layui 文档

三：跨域处理

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

到了这里，关于Layui快速入门之第十二节图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

第十二节——ref

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册 ref 加在普通的元素上，

2024年02月07日
浏览(32)
【Layui】图标选择器 iconPicker 的使用

系统：Win10 JDK：1.8.0_333 IDEA：2022.3.3 SpringBoot：2.7.6 Layui：2.8.4 iconPicker：1.1 之前在写一个系统的时候，实现了目录管理，可以自定义目录。在该项目中，我使用的前端组件库是 Layui，为了实现目录的图标编辑功能，我选择了 Gitee 上的 Layui-IconPicker 项目，可以直接选择 Layui 自带

2024年02月12日
浏览(33)
layui中文、以及图标乱码解决方案

最终解决方案…手动对js文件中的中文，用unicode进行编码

2024年02月11日
浏览(35)
Python之第十二章处理Excel电子表格

工作薄: .xlsx文件、包含多个表（工作表）。活动表：用户当前查看的表、关闭Excel前最后查看的表。 import openpyxl 先制作一张例表1.xlsx openpyxl模块提供了openpyxl.load_workbook()函数，用来打开Excel文档。 openpyxl.load_workbook()函数打开Excel文档会返回一个workbook数据类型的值。 workb

2024年02月05日
浏览(35)
（数字图像处理MATLAB+Python）第十二章图像编码-第一、二节：图像编码基本理论和无损编码

图像编码：一种将数字图像转换为压缩表示形式的过程。它的目标是减少图像数据的存储空间，并在传输或存储时减少带宽和存储需求、主要分为两类无损压缩：尽可能地保留原始图像的所有信息，以实现无失真的压缩。其中最常见的算法之一是无损JPEG（JPEG-LS）编码，它

2024年02月10日
浏览(117)
Layui 简单介绍及入门

目录一.Layui （国产品牌） 1.1 Layui是什么二.比较layui和easyui，bootstrap的区别 2.1 layui和bootstrap的对比 2.2 layui和easyui对比三.Layui入门四.案例用我的话来说就是不仅拥有easyui丰富的组件库，还拥有bootstrap 的美观，嘿嘿 l

2024年02月15日
浏览(31)
Layui之入门

目录一、layui介绍 1.是什么 2.谁开发的 3.特点二、layui，easyui和bootstrap的区别 1.layui、easyui与bootstrap的对比 2. layui和bootstrap对比（这两个都属于UI渲染框架） 3. layui和easyui对比三、基础使用四、登录注册实例讲解 1.登录 2.注册五、如何扩展一个layui（自定义模块） 1.是

2024年02月13日
浏览(34)
layui入门增删改查

作为一名开发人员，我们经常需要对数据库中的数据进行增删改查（CRUD）操作。在本篇博客中，我们将重点介绍Lauiyi这个优秀的库是如何帮助我们简化和优化这些操作的。 Lauiyi是一个强大的开源工具，提供了丰富的函数和方法，可以轻松地实现对数据库的增删改查操作。下

2024年02月16日
浏览(36)
Layui基础入门

一、引言 1.1 介绍官网：https://www.layui.com/ 这个不维护了看下面这个 https://www.layuiweb.com/ 在官网首页，可以很方便的下载LayUI LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。使得前端页面的制作变得更加简单。二、环境搭

2024年02月10日
浏览(34)
SQL入门之第十讲——INNER JOIN 内连接

在实际的业务当中，往往需要多张表连接查询，这就会涉及到JOIN 连接 1. JOIN 连接的类型 INNER JOIN ：内连接, 可以只写JOIN ,只有连接的两个表中，都存在连接标准的数据才会保留下来，相当于两个表的交集。如果前后连接的是同一个表，也叫自连接。 LEFT JOIN ：左连接，也叫左

2024年02月02日
浏览(50)