layui使用矢量库图标

最新推荐文章于 2023-11-04 18:27:00 发布
最新推荐文章于 2023-11-04 18:27:00 发布
阅读量562 收藏
点赞数 1
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guoyu1_/article/details/108882743
版权

阿里巴巴Iconfont layui 图标库 前端开发 CSS
关键词由CSDN通过智能技术生成

1. 阿里巴巴图标的图标代码下载到本地解压。

 

2. 在layui项目中创建一个文件夹，放入上面的几个文件

，然后再引入iconfont.css文件即可使用：

<link rel="stylesheet" href="./plugins/layui/myicon/iconfont.css" type="text/css">

可以对iconfont.css进行类名修改

使用

<i class="iconfont icon-right" style="color: #33a0f5"></i>

 

 

 

 

前端路上迷茫的小鲨鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Layui】layui 自定义icon 图标
德仔
10-14 2918
Layui 提供的图标较少，通常不能满足个性化的需求，阿里,font-awesome等提供免费的图库，那么如何扩展呢？
layui拓展非内置图标
yh_852974543的博客
08-16 965
layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont），内置图标共140个，如果图标不能满足你的项目需要，可以从阿里巴巴的官方图标库中挑选合适的图标加入你的项目中。 1、打开阿里巴巴官网图标库，挑选图标下载代码 地址：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9...
Layui快速入门之第十二节 图标
qq_61313896的博客
09-18 3166
Layui快速入门之第十二节 图标
layui-Iconfront 图标库使用
weixin_34007886的博客
05-09 1725
2019独角兽企业重金招聘Python工程师标准>>> ...
layui图标大全
我的博客
04-13 1728
layui图标大全
layui添加阿里巴巴图标库
Acinek的博客
11-14 1万+
前言： layui是一款不错的前端框架，其官网上展示的图标有140个，当不够用的时候，我们就需要去扩展它的图标样式，今天为大家带来扩展方法，扩展后我们可以和layer官网中的示例一样，使用样式来生成图标。如下： （layui-icon-category为扩展的样式） layer官网存在的图标: &lt;i class="layui-icon layui-icon-rate-solid"&...
layui矢量图标有哪些,快速引入的方法
u013931283的博客
01-18 282
快速复制的网址:http://www.shagua.wiki/project/3?p=85
layui使用方法——图标
qq_39368007的博客
04-17 4295
layui使用方法 创建项目并引入layui 方法1 使用字符实体 方法2 使用样式 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4....
layui图标选择器插件，主要用于后台菜单图标管理iconPickerFa
最新发布
12-26
iconPickerFa插件则是在layui的基础上，专门用于图标选择的功能，其设计目标是使用户能够便捷地浏览、搜索和选择Font Awesome图库中的图标，Font Awesome是广泛使用的矢量图标库，包含了数千个高质量的SVG图标。...
Layui自定义字体图标扩展
userwang的博客
07-01 1139
目录前言图标扩展及使用方式 前言 本章给大家分享的是Layui的自定义字体图标。 图标扩展及使用方式 layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。 链接：阿里巴巴矢量图库 我们可以随机选择一个图标点进去 鼠标点在图标上会有一个
解决layui使用layui-icon出现默认图标的问题
01-19
最近在学习使用layui的时候碰到了一个巨诡异的问题，使用layui-icon时出现了默认图标问题，先上图： 后台代码： 正常情况下应该在箭头指示处有一段unicode编码才会显示图标，百度了很久发现没人碰到过这个问题，当我把这段代码复制到txt文件中时发现了一个问题。 这货中间有个空格，当我把这个空格去掉后世界和平。原来这段代码是我看到示例后直接拷到自己的代码上的，带了unicode编码，但是idea这边没有显示，所以看起来极其诡异，这就是对拿来主义的惩罚吧，希望大家引以为戒。 以上这篇解决layui使用layui-icon出现默认图标的问题就是小编分享给大家的全部内容了，希望能给大家
layui.zip layui api文档 使用说明
10-15
6. **美观的图标库**：layui自带一套完整的矢量图标库，涵盖了日常开发中常见的图标，且支持自定义颜色和大小。 7. **API文档详细**：layui提供的API文档详尽，不仅有基础的使用示例，还有深入的配置选项和事件说明...
layui引入icon图标
qq_45040036的博客
07-18 2688
看了好多教程，一点思路也不清晰，闲话少说，直接上步骤！！！添加到购物车5、使用，首先打开iconfont.css，复制class名 (有两个class名，一个是公共的class，一个是下载的图标的class名)，在i>标签添加 复制的class名，然后就大功告成！！！这是公共class名，必须复制important;这是第一个icon图标 只复制icon-caidan，不要复制berore这是第二个icon图标，方法同上。
layui图标使用和自定义矢量库图标
qq_36575358的博客
11-21 2726
layui图标： layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont） 使用方法： 通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标。内置图标的class查阅图标文档 ...
layui图标大全,精心整理
热门推荐
u013931283的博客
12-27 3万+
layui图标大全,一键复制粘贴,非常方便 点击这前往,复制代码 转载自:http://www.shagua.wiki/project/3?p=85
layui-icon常用记录
丁亚军(Java)
01-20 1万+
<button id="btnPrintDetail" class="layui-btn icon-btn"><i class="layui-icon">&#xe66d;</i>明细打印</button> icon很多，选择起来纷繁复杂，罗列一点常用的，用于自己以后使用~~ 实心 &#xe68f; layui-icon-heart-fill 空心 &#xe68c; layui-icon-heart.
Layui自定义icon图标
weixin_43702272的博客
11-04 1368
在使用Layui 进行开发时，会使用： <i class="layui-icon">&#xe60c;</i> 或者 <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 进行图标的引入，但是官方给的图标毕竟有限...
layui 字体图标
weixin_30898109的博客
09-24 602
layui 字体图标 通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标。 <i class="layui-icon layui-icon-face-smile" style="font-siz...
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3. 在项目中创建一个字体图标库文件夹，将从阿里巴巴矢量图标库下载的字体文件（通常是.ttf或.otf格式）放入该文件夹中。 4. 在项目的`index.html`文件中，通过`<style>`标签引入字体图标库，并设置其`font-family`属性。例如： ```html <style> @font-face { font-family: 'iconfont'; src: url('path/to/iconfont.ttf') format('truetype'); } </style> ``` 5. 在需要使用字体图标的地方，使用`<text>`或其他合适的组件，并设置`class`属性为图标对应的类名。例如： ```html <text class="iconfont icon"></text> ``` 在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。 6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值