layui 自定义字体图标 扩展
layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展。
- 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标库。
- 第二步,通过右上角的用户图标,授权登陆一个账号,在此我选择使用Github作为登陆账号。
- 第三步,登陆完成后,让我们稍微了解下基本的操作。
Iconfont提供了非常多的图标库,有官方的图标资源,也有一些第三方的素材。选择方式多种多样,更能集成一些彩色图标到项目中,在此我们选择「多彩图标库」里的「多色金融商务小图标」,作为我们案例。
通过面板的操作,我们能轻松收藏/下载各类图标,也能将这些图标像「添加到购物车」一般加入到一个项目。
将浏览的图标都放入购物车,创建一个项目。
- 第四步,在添加完一个项目后,我们来熟悉一下对项目的管理和操作
设置项目信息,修改图标的FontClass前缀为「layui-extend」
这是,修改保存后的效果图。
- 第五步,选择集成方式。
Iconfont提供了两种集成方式,一种是通过生成在线的CDN资源进行集成,好处就是维护起来非常方便。一个项目会有一个唯一的地址且不变,仓库更新后也能直接引用而忽略更新的问题。另一种方式则是下载到本地集成,好处是便于保证整个项目的完整度和保留各类版本。
仁者见仁,智者见智,我选择了下载文件的方式进行集成。
在点击下载到本地按钮后,我们得到了一个ZIP包。从layui官网下载框架最新版本,两者解压后放在同一个目录,目录结构如下。
- 第六步,在layui目录下的 css/modules 下新建一个名为layui-icon-extend的目录,将字体目录中的以 iconfont开头的文件拷贝进去。
- 第七步,开始写代码了!!!
在页面引用中引用 layui-icon-extend 下的 iconfont.css文件,然后就可以使用「 iconfont layui-extend-xxxx 」的方式引用图标了。
在上面的样式中,iconfont指的是 iconfont.css 中的样式名。为避免冲突,一般不推荐修改。当然,如果你引用了较多iconfont上的项目,也是可以修改的。
- 注意:千万不要修改为layui-icon,会和 layui自带的图标冲突!!
- 第八步,让我们一起来看下效果吧。
layui 自定义字体图标 扩展的更多相关文章
- easyui之自定义字体图标(鼠标覆盖时切换颜色)
项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- fontawesome-iconpicker 自定义字体图标选择器
官网地址:https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../cs ...
- Spring Boot使用layui的字体图标时无法正常显示 解决办法
在html文件使用字体图标并且预览时正常,但是启动工程后显示不正常,浏览器调试界面显示字体文件无法decode: Failed to decode downloaded font: xxxxx 如图所 ...
- 微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...
- 在webstorm开发微信小程序之使用阿里自定义字体图标
1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. ...
- 扩展layui中的自带字体图标
项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...
- Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法
首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是 --阿里巴巴矢量图标库 -网 ...
- React Native 开发豆瓣评分(六)添加字体图标
添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...
随机推荐
- tensorflow学习笔记(三):实现自编码器
黄文坚的tensorflow实战一书中的第四章,讲述了tensorflow实现多层感知机.Hiton早年提出过自编码器的非监督学习算法,书中的代码给出了一个隐藏层的神经网络,本人扩展到了多层,改进了代 ...
- 关于qt creator各种假死的问题
来自CSDN网友( qq191329827)内容,亲自尝试,且经历一致: 我有两个笔记本,1个台式机,都装了qt, 然后,我的thinkpad x1c,装上之后creator各种假死,网上看了好多解决 ...
- Hadoop vs Elasticsearch – Which one is More Useful
Hadoop vs Elasticsearch – Which one is More Useful Difference Between Hadoop and Elasticsearch H ...
- Swagger2.9.2进入API界面报NumberFormatException异常
[转载请注明]: 原文出处:https://www.cnblogs.com/jstarseven/p/11778377.html 作者:jstarseven 码字挺辛苦的..... ...
- 【C/C++开发】c++ 工具库 (zz)
下面是收集的一些开发工具包,主要是C/C++方面的,涉及图形.图像.游戏.人工智能等各个方面,感觉是一个比较全的资源.供参考! 原文的出处:http://www.codemonsters.de/ho ...
- 『正睿OI 2019SC Day5』
网络流 网络流的定义 一个流网络\(G=(V,E)\)为一张满足以下条件的有向图: 每一条边有一个非负容量,即对于任意\(E\)中的\((u,v)\) , 有\(c(u,v)\geq0\). 如果\( ...
- group by 对多个字段进行分组
转载自:https://blog.csdn.net/xx_star1204/article/details/72884983 在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获 ...
- AD常用术语
SMD : Surface Mounted Devices 表面贴装器件 PAD 焊盘
- 通过Ldap实现人事系统组织人事和AD的同步
项目需求:同步人事系统的组织架构-对应AD的OU树同步人事系统的员工-对应AD的用户 创建OU 名字不能重复,需要父级路径(parentOrganizeUnit)以及新ou的名字(name),如果最父 ...
- WinForm的TextBox限制只能输入数字并且屏蔽默认右键菜单
基于Window消息实现 class TextBoxExt:TextBox { private const int WM_RBUTTONDOWN = 0x0204; private const int ...