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 自定义字体图标 扩展的更多相关文章

  1. easyui之自定义字体图标(鼠标覆盖时切换颜色)

    项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...

  2. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  3. fontawesome-iconpicker 自定义字体图标选择器

    官网地址:https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../cs ...

  4. Spring Boot使用layui的字体图标时无法正常显示 解决办法

    在html文件使用字体图标并且预览时正常,但是启动工程后显示不正常,浏览器调试界面显示字体文件无法decode: Failed to decode downloaded font: xxxxx 如图所 ...

  5. 微信小程序中使用iconfont/font-awesome等自定义字体图标

    小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...

  6. 在webstorm开发微信小程序之使用阿里自定义字体图标

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. ...

  7. 扩展layui中的自带字体图标

    项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...

  8. Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

    首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是  --阿里巴巴矢量图标库 -网 ...

  9. React Native 开发豆瓣评分(六)添加字体图标

    添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...

随机推荐

  1. Linux下进程间通信方式——信号量(Semaphore)

    1.信号量 信号量本质上是一个计数器(不设置全局变量是因为进程间是相互独立的,而这不一定能看到,看到也不能保证++引用计数为原子操作),用于多进程对共享数据对象的读取,它和管道有所不同,它不以传送数据 ...

  2. ZROI 暑期高端峰会 A班 Day3 图论

    最短路 NOI2019 D2T1 弹跳 KD 树 线段树套set -> 线段树套并查集? POI2014/2015 ??? \(n\) 个点 \(m\) 条边 DAG.求删掉每个点后 \(1\) ...

  3. haproxy 配置文件详解 之 global

    配置示例: global log 127.0.0.1 local0 info maxconn user nobody group nobody daemon nbproc pidfile /usr/l ...

  4. vue工具 - vue/cli@3.xx 安装使用流程

    mac安装记得npm前边加sudo 安装脚手架,用于生成目录 npm install -g @vue/cli 安装用于编译单个的.vue文件 npm install -g @vue/cli-servi ...

  5. Spring Security教程之session管理(十一)

    1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护 Spring Security通过http元素下的子元素s ...

  6. GPG实践

    遇见的问题 安装之后没有显示如教程中的 直接提示真实姓名于电子邮件的地址 公钥与密钥 设置吊销证书

  7. 解决myeclipse2017 properties中文被Unicode编码

    输入:http://propedit.sourceforge.jp/eclipse/updates/ 在线安装插件解决.

  8. 由浅入深了解NB-IoT | 我的物联网成长记

    [摘要] 什么是NB-IoT?NB-IoT有什么优势?NB-IoT能做什么?本文将会从NB-IoT技术的发展历程,技术特点,通信协议,应用场景等方面为您全方面解读NB-IoT技术,了解NB-IoT的独 ...

  9. [转帖]vagrant 添加带版本号的 box

    vagrant 添加带版本号的 box https://www.jianshu.com/p/12cf1ecb224b 第三种好用 lnmpcomposerphp  阅读约 8 分钟 前言 众所周知,v ...

  10. linux - 用户配置文件

    用户配文件: 1用户信息文件 /etc/passwd   2 影子文件 /etc/shadow  3  组信息文件 /etc/group 4 组密码文件 /etc/gshadow 1 用户信息文件 / ...