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自带的图标冲突!!
第八步,让我们一起来看下效果吧。
转载自:https://fly.layui.com/jie/19051/
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 使用默认字体图标 ...
随机推荐
- git使用问题与技巧
1.修改gitolite管理员 如果gitolite原来的管理员已经没了,那么需要把当前的公钥放到服务器覆盖,然后替换目录下.ssh/authorized_keys内容 2.clone报告超过限制 w ...
- 作业:用pygame实现俄罗斯方块
用Pygame实现俄罗斯方块 参考资料后我安装了Pygame,参考了网上的代码实现了俄罗斯方块小游戏.我试着理解网上的代码的原理和含义,对这些代码的原理有了一个粗略地理解,代码通过参数,RGB值等来实 ...
- 通过inspect在电脑的Chrome上查看手机上的H5
首先打开手机的开发者模式,(在连续点击7次版本号,系统会提示已经打开开发者模式) 然后打开一个手机浏览器. 然后在电脑上打开chrome://inspect/#devices.这是就会出现手机上浏览器 ...
- 显示屏display的API
display是代表25个led阵列显示屏的对象,包括以下的功能方法 # 获取(x,y)灯的亮度. 从 0 (不亮) to 9 (最亮). display.get_pixel(x, y) # 设置(x ...
- AntDesign vue学习笔记(四)使用组件切换
同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...
- JSR223 PostProcessor VS BeanShell PostProcessor in JMeter
I would recommend using JSR223 PostProcessor About performance: In JMeter's official user manual, Ab ...
- 图论 --- BFS + MST
Borg Maze Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7844 Accepted: 2623 Descrip ...
- Sitecore客户体验成熟度模型之旅
“成熟”这个词带来了很多想法:你在青年时不愿意找到工作?你四岁的孩子偶尔发脾气?可能还有你的公司能否在数字化时代提供个性化的客户体验? 你如何定义CX成熟度?如果您的CX战略仍处于开发阶段,您需要达到 ...
- (火狐浏览器)前端以FormData类形成表单(含文件),通过ajax提交,PHP后端iconv()报“文件名含有非法字符”且POST中的‘Ttitle’丢失
[错误信息]后端获取的POST中丢失了Ttile,文件名乱码导致iconv()出错,利用mb_detect_encoding()函数检测输入的字符串,返回false; mb_detect_encodi ...
- ubuntn18 docker zabbix+grafana安装和使用
在ubuntu docker inflxudb(安装 使用 备份 还原 以及python编码) telegraf Grafana我采用telegraf采集数据, 本文计划采用zabbix来才采集数据, ...