layui引用阿里矢量图标

已于 2023-03-14 09:54:31 修改
阅读量414 收藏
点赞数
分类专栏： 前端学习 文章标签： layui css 前端
于 2023-03-14 09:37:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43983238/article/details/129516653
版权

layui-pear-admin添加阿里矢量图标

可能需要用到的

阿里矢量图标地址:https://www.iconfont.cn/
layui官方文档:https://layui.gitee.io/v2/docs/
pearadmin gitee地址:https://gitee.com/pear-admin/Pear-Admin-Layui
pearadmin文档:http://www.pearadmin.com/doc/

注册阿里矢量图标账号

因为后续也需要使用到别的icon 建议添加到购物车进行批量下载
下载的时候新增项目或者加入到之前的项目中,主要是为了方便后续图标的使用集成
这样你再去下载的话就有多个矢量图标可以使用了,方便后续图标的使用集成

导入并下载项目

在项目里边设置前缀(FontClass/Symbol 前缀)和Font Family
在项目里边设置前缀(FontClass/Symbol 前缀)和Font Family

使用icon

下载并解压入项目,并引入项目路径
引入icon
就可以在你的项目中进行使用了

<button> class="pear-btn pear-btn-primary pear-btn-sm" lay-event="examine"><i class="ske-icon ske-icon-shenhe"></i></button>

就可以在你的项目中进行使用了

下边是示例效果
在这里插入图片描述

不知道为啥会这么小,有懂css的大佬可以教我调大一点

不齊丶那丫頭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Layui快速入门之第十二节 图标
qq_61313896的博客
09-18 2520
Layui快速入门之第十二节 图标
iconfont-阿里巴巴矢量图标库在layui中的使用
记录和分享属于我的“IT”时光
08-27 624
iconfont-阿里巴巴矢量图标库在layui中的使用
layui使用iconfont
weixin_30708329的博客
03-28 864
layui的图标取自于阿里巴巴的矢量图标库 Iconfont，同样的，这篇教程也是基于Iconfont进行扩展。 第一步，通过浏览器打开 http://iconfont.cn/ ，访问阿里巴巴矢量图标库。 第二步，通过右上角的用户图标，授权登陆一个账号，在此我选择使用Github作为登陆账号。 第三步，登陆完成后，让我们稍微了解下基本的操作。 Iconfont提供了非常多的图标库，有官方...
layui下使用iconfont-阿里巴巴矢量图标库的图标
cwtnice的博客
09-14 1350
前端框架： Layui 后端框架： Django iconfont-阿里巴巴矢量图标库官网 在素材库中浏览，将需要的图标，通过鼠标放在图标上面，选择添加入库（就是那个像购物车一样的东西），一次好像最多只能添加20个。 然后可以通过创建项目把库里的图标加入项目中： 选择Font class，并下载到本地： ...
layui引入icon图标
qq_45040036的博客
07-18 2457
看了好多教程，一点思路也不清晰，闲话少说，直接上步骤！！！添加到购物车5、使用，首先打开iconfont.css，复制class名 (有两个class名，一个是公共的class，一个是下载的图标的class名)，在i>标签添加 复制的class名，然后就大功告成！！！这是公共class名，必须复制important;这是第一个icon图标 只复制icon-caidan，不要复制berore这是第二个icon图标，方法同上。
阿里矢量图标库
04-26
阿里矢量图标库
阿里巴巴矢量图标批量下载 IconontDownload.js
09-04
如何批量下载阿里巴巴矢量图标库的图标？ 1.打开阿里巴巴矢量图标库的项目；2.按F12打开浏览器的开发者工具，复制并执行自动下载图标的代码。
Draw.io用阿里云3D矢量图标库-2022大数据
06-19
Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
阿里云和azure矢量图标
12-28
阿里云和azure矢量图标
使用阿里矢量图标库操作流程
05-16
个人使用使用阿里矢量图库时记录操作流程，初次接触学习写下了以供参考学习，如有问题可以给我留言，我会及时处理。本流程多数为截图，文字描述简单了点。
layui图标使用和自定义矢量库图标
qq_36575358的博客
11-21 2644
layui图标： layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont） 使用方法： 通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标。内置图标的class查阅图标文档 ...
layui添加阿里巴巴图标库
Acinek的博客
11-14 1万+
前言： layui是一款不错的前端框架，其官网上展示的图标有140个，当不够用的时候，我们就需要去扩展它的图标样式，今天为大家带来扩展方法，扩展后我们可以和layer官网中的示例一样，使用样式来生成图标。如下： （layui-icon-category为扩展的样式） layer官网存在的图标: &lt;i class="layui-icon layui-icon-rate-solid"&...
layui图标大全,精心整理
热门推荐
u013931283的博客
12-27 3万+
layui图标大全,一键复制粘贴,非常方便 点击这前往,复制代码 转载自:http://www.shagua.wiki/project/3?p=85
layui矢量图标有哪些,快速引入的方法
u013931283的博客
01-18 268
快速复制的网址:http://www.shagua.wiki/project/3?p=85
Layui学习——页面元素之布局、颜色、图标
尽力漂亮的博客
04-27 2398
Layui学习之路Layui页面元素之布局、颜色、图标 Layui页面元素之布局、颜色、图标 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>入门&全局CSS之概览&栅格系统</title> <!-- 新 layui...
layuiAdmin单页版-----学习整理
ZLZQ_Yuan
01-16 1万+
关于layuiAdmin（单页版）能找到的常规使用操作，建议先看这部分： 开发者文档：https://www.cnblogs.com/niuben/p/11038897.html https://blog.csdn.net/sanai_1992/article/details/100129330 官网layuiAdmin实例：https://www.layui.com/admin/pro/#...
WTM重磅更新，LayuiAdmin免费用 and more
dotNET跨平台
08-31 1176
从善如登，从恶如崩。对于一个开发人员来说，那就是做一个好的系统不容易，想搞砸一个系统很简单，删库跑路会还不会么。对于我们开源框架的作者来说，做一个好的框架就像登山（也许是...
layui实操记录
qq_48968230的博客
05-11 218
关于layui的实操记录
SpringSecurity权限管理系统实战—七、处理一些问题
CoderMy的博客
08-03 2693
文章目录系列目录前言具体内容去除JWT前端提示信息遇到的问题一、Springsecurity中的UsernameNotFoundException异常无法被正常捕获二、无法统一处理filter中抛出的异常后叙
vue使用阿里矢量图标
最新发布
07-28
Vue可以使用阿里矢量图标库来使用阿里矢量图标。首先，你需要在你的Vue项目中安装`@vue/cli`，如果你还没有安装的话，可以通过以下命令进行安装： ``` npm install -g @vue/cli ``` 安装完成后，你可以在你的Vue项目中使用以下命令来安装阿里矢量图标库： ``` npm install @ant-design/icons-vue ``` 安装完成后，在你的Vue组件中，你可以通过以下方式来使用阿里矢量图标： ```vue <template> <div> <a-icon type="icon-name" /> </div> </template> <script> import { Icon } from '@ant-design/icons-vue'; import { createFromIconfontCN } from '@ant-design/icons-vue'; const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_xyz.js', // 替换为你自己的图标库链接 }); export default { components: { 'a-icon': Icon, }, }; </script> ``` 在上面的代码中，`icon-name`是你想要使用的具体图标的名称，你可以在阿里矢量图标库中找到你需要的图标名称。 另外，如果你想要使用自己的图标库链接，你可以替换`scriptUrl`为你自己的链接。 这样，你就可以在Vue项目中使用阿里矢量图标了。希望对你有所帮助！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值