layui 表格字体_layui自定义字体图标图文教程

4de27a069834d408407cfe97a965c969.png

layui的图标取自于阿里巴巴的矢量图标库 Iconfont

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

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

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

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

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

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

26ad365c6ca39dd4a05679fe551e2c96.png

40c8378daf3944429ca0cef6965532f0.png

83b8df791971afd89b3cc6fa48422068.png

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

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

c45f6f899168b006d730f2954f47cb00.png这是,修改保存后的效果图。

b7e8a9aaac3c3988956a6bffd19b5b8f.png第五步,选择集成方式。

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

660edc68e51640d8f8260ca28ca7073a.png仁者见仁,智者见智,我选择了下载文件的方式进行集成。

在点击下载到本地按钮后,我们得到了一个ZIP包。从layui官网下载框架最新版本,两者解压后放在同一个目录,目录结构如下。

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

bbeced65fd373e6dc97bf9c8888250fb.png第七步,开始写代码了!!!

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

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

注意:千万不要修改为layui-icon,会和 layui自带的图标冲突!!

234bd4243b7aa9feb34150605d3df9ff.png第八步,让我们一起来看下效果吧。

c413818f52199253cde9c2a80d83fcec.png更多layui知识请关注layui使用教程栏目。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值