如何用layui自定义图标和字体-创新互联

这篇文章将为大家详细讲解有关如何用layui自定义图标和字体，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的10余年时间我们累计服务了上千家以及全国政企客户，如成都会所设计等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致称赞。

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

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

如何用layui自定义图标和字体第二步，通过右上角的用户图标，授权登陆一个账号，在此我选择使用Github作为登陆账号。

如何用layui自定义图标和字体第三步，登陆完成后，让我们稍微了解下基本的操作。
Iconfont提供了非常多的图标库，有官方的图标资源，也有一些第三方的素材。选择方式多种多样，更能集成一些彩色图标到项目中，在此我们选择「多彩图标库」里的「多色金融商务小图标」，作为我们案例。

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

如何用layui自定义图标和字体将浏览的图标都放入购物车，创建一个项目。

如何用layui自定义图标和字体

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

如何用layui自定义图标和字体设置项目信息，修改图标的FontClass前缀为「layui-extend」

如何用layui自定义图标和字体这是，修改保存后的效果图。

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