layui使用iconfont

摘要:
layui的图标取自于阿里巴巴的矢量图标库Iconfont,同样的,这篇教程也是基于Iconfont进行扩展。从layui官网下载框架最新版本,两者解压后放在同一个目录,目录结构如下。第六步,在layui目录下的css/modules下新建一个名为layui-icon-extend的目录,将字体目录中的以iconfont开头的文件拷贝进去。在页面引用中引用layui-icon-extend下的iconfont.css文件,然后就可以使用「iconfontlayui-extend-xxxx」的方式引用图标了。important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.layui-extend-quexianicon:before{content:"e605";}在上面的样式中,iconfont指的是iconfont.css中的样式名。

layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展。

第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标库。

第二步,通过右上角的用户图标,授权登陆一个账号,在此我选择使用Github作为登陆账号。

第三步,登陆完成后,让我们稍微了解下基本的操作。

Iconfont提供了非常多的图标库,有官方的图标资源,也有一些第三方的素材。选择方式多种多样,更能集成一些彩色图标到项目中,在此我们选择「多彩图标库」里的「多色金融商务小图标」,作为我们案例。

通过面板的操作,我们能轻松收藏/下载各类图标,也能将这些图标像「添加到购物车」一般加入到一个项目。

将浏览的图标都放入购物车,创建一个项目。

第四步,在添加完一个项目后,我们来熟悉一下对项目的管理和操作

设置项目信息,修改图标的FontClass前缀为「layui-extend-」

这是,修改保存后的效果图。
layui使用iconfont第1张

第五步,选择集成方式。

Iconfont提供了两种集成方式,一种是通过生成在线的CDN资源进行集成,好处就是维护起来非常方便。一个项目会有一个唯一的地址且不变,仓库更新后也能直接引用而忽略更新的问题。另一种方式则是下载到本地集成,好处是便于保证整个项目的完整度和保留各类版本。

仁者见仁,智者见智,我选择了下载文件的方式进行集成。
在点击下载到本地按钮后,我们得到了一个ZIP包。从layui官网下载框架最新版本,两者解压后放在同一个目录,目录结构如下。

第六步,在layui目录下的 css/modules 下新建一个名为layui-icon-extend的目录,将字体目录中的以 iconfont开头的文件拷贝进去。

第七步,开始写代码了!!!

在页面引用中引用 layui-icon-extend 下的 iconfont.css文件,然后就可以使用「 iconfont layui-extend-xxxx 」的方式引用图标了。
layui使用iconfont第2张

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1553749761811'); /* IE9 */
  src: url('iconfont.eot?t=1553749761811#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPcAAsAAAAACAAAAAOPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEBINEATYCJAMICwYABCAFhG0HNRvvBhEVnOnIfhS4sRt8yq+yZN7K03rKOQgeeDvr/UHwJ1pMFmJ1lMvkoIUumZNUihXZXcUECIhbnPNI6jrqciRnTx5926UDzjISRlzIC/n/OWa6FM8PNJfsoL0BjlsH2HEdwncgB+b3GBto93MeApAkKyQ6dOoxAAcaxjQBiBlTJ4/FkZKj1aQKHAhsJWs1RD06DmWNcgeo839ffKM8ByjoKkZGn0kdJ9Dmo25GqIH/ASNcBIzxtAC3CVSgEGggBpTqe6GG/kIqUvFrpGNdqQI+6v//u/TV/uOBAGHDSHYBkIj0c2LYzFMtUADQOPf+s8DTXt8JutvlWuaZXJVliY1X116ODZj7BhtVVjAs5dp1gdDwJ08GPH068Pnzwc+ejVx70D+o24YkQk8GRPvT82JEMKHLgHX7ZTi4L2awZR0gwn4ZPiisqg2mUWWKYIxsrRHhvcELVB2AkGlsytkbH9wUkx+2zJZGaysUnRvawPrMPXGGNdB+h4xQYHc0gf1ShsAyDGtTlZnKiJbrohkYMq2cPYFhe++ksm4td/CLnff+HUmv2hblmthsoitqW5WcWyzvRN2RbkZqyhXt92/tiklBqsOO90g46U13m0c37xetszOm9IpNTbUp/jWzW6ef32wedad768020n9Gbzcgz+esH/Gg3CPNaJhja6u48j3edM8w2cbcDgjvvbfH7iwotLtv7/nn/1x4IPPAwpeD/+257bYXFuyM3S6HeYeh4RxPvktpaxtRH21KT/kDyHL6BuS10/1n8MHvPMdv5beOSRzQxmzjTxxots6/RRsA/t9Ur6pt/uff4Jobc2y0t8Uvh6EB8OLmEkGs/29qtDOC464NAv4eo2WdprIMhaLJjNKwwln0t1IikcB/qDnSy75GE7FW4OAZCAp2kkDFQSZSwxaCjkEl2HDQGiQFOm82iDIPFaE5gXwrAAQ+x0DBwzVQ8RF8kRPsD6aO/jBzaAwrn6L2XDsVrtoTCkYPZA+hyjNtqXgVpD7QrxNBSZaP+yBVoQtsw8qG7pghjbGganyHWYOmPIUbXAyTJIeC8ggVGwFz4ZqmLnsjQ+XpYOWMIIEhD5B6IKTkMtptzla5n39AvlpCoJqaCvkHIpVwcGAzWC2Qd37WquZaHlJp+ByMaUAjuRS4gRYlpj8HivJREaQwQ9DDW3CZpJFuyzfmF6ZPtwWQDImSOURlfY1dKLKjlw0GAA==') format('woff2'),
  url('iconfont.woff?t=1553749761811') format('woff'),
  url('iconfont.ttf?t=1553749761811') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1553749761811#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layui-extend-quexianicon:before {
  content: "e605";
}


在上面的样式中,iconfont指的是 iconfont.css 中的样式名。
为避免冲突,一般不推荐修改。当然,如果你引用了较多iconfont上的项目,也是可以修改的。

注意:千万不要修改为layui-icon,会和 layui自带的图标冲突!!
https://fly.layui.com/jie/19051/

免责声明:文章转载自《layui使用iconfont》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Altium Designer(AD软件)如何导出gerber文件统计量下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

ubuntu网卡配置

网卡配置文件采用YAML格式,必须以/etc/netplan/XXX.yaml文件命名方式存放可以每个网卡对应一个单独的配置文件,也可以将所有网卡都放在一个配置文件里自动获取IProot@ubuntu1804:~#cat/etc/netplan/01-netcfg.yaml#Thisfiledescribesthenetworkinterfacesavail...

EwoMail 开源邮件服务器安装教程

本教程示例中使用的主要域名是ewomail.cn。设置主机名EwoMail将在安装后默认使用带有域名前缀mail的主机名。例如,mail.ewomail。cn将系统主机名更改为mail.ewomail.cn。查看当前主机名hostname-f修改主机名,修改文件/etc/sysconfig/network修改文件/etc/hosts,添加mail.ewoma...

配置nginx

aNULL:!MD5:!...

html2canvas踩坑日记

在html2canvas<html2canvas(document.querySelector(“#capture”)).then(canvas=>{document.body.appendChild(canvas)});//图片地址是文档。身体appendChild(画布);...

grep多条件查找"与","或"

这里以jps命令为例jps查看全部的jvm进程"与"查找下图是所有jvm进程如果想查找256891ThriftServer服务用"与"查找可以理解为是条件查找命令:jps|grep-eer|grep-eT"或"查找方法一:grep-E'A|B'和grep-eA-eB方法二:egrep'A|B'方法三:awk'/A|B/'...

更改nexus的工作目录

默认情况下,nexus的工作目录位于${user_home}/sonatype工作目录中。在Linux中,如果用户是root用户,则使用/root/sonatype。这便于通过war将nexus安装到servlet容器中,但不利于服务器的集中管理。这需要更改默认的nexus工作目录位置。为了方便管理,您可以选择使用环境变量。...