博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
layui + 阿里巴巴iconfont图标库导入
阅读量:6702 次
发布时间:2019-06-25

本文共 800 字,大约阅读时间需要 2 分钟。

hot3.png

layui2.0及以前版本的字体图标不能满足项目的需求,其图标来源于阿里巴巴www.iconfont.cn,所以自己手动丰富了项目字体图标库,记录如下。

1、添加字体图标至购物车

打开www.iconfont.cn,选择中意的字体图标库,添加至"库"(即字体购物车图标),如下图所示 输入图片说明

2、将图标添加至项目

点击右侧“购物车图标”,然后将选中的字体图标添加至项目。建议新建项目,方便以后扩展。

3、下载并引入代码

在项目中,点击"下载至本地",然后将解压的文件复制到本地的项目中,并在本地引入 iconfont.css 文件即可。

4、选择字体图标

在浏览器中打开,demo_unicode.html文件,按照文件提示,在本地项目引入相关html代码即可。

如 <i class="iconfont">3</i>

若是layui,为样式美观,可修改iconfont.css的修改css代码如下

.iconfont{font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;display: inline-block;-webkit-text-stroke-width: 0.2px;font-size:14px;transition: all 0.4s linear 0s;-o-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;}

5、以后若需要再添加字体图标,重复上述步骤,直接在阿里巴巴iconfont下载项目代码至本地,覆盖以往的代码(iconfont.css 除外),即可使用新的字体图标。

转载于:https://my.oschina.net/u/3403514/blog/1518961

你可能感兴趣的文章
tkinter的GUI设计:界面与逻辑分离(二)-- 菜单栏
查看>>
Visual Studio DSL 入门 8---创建状态机元数据模型
查看>>
如何讓 iOS UIWebView 連線時傳送自訂 Cookie 的方法[转]
查看>>
LiDAR Textbook & Automated Road Network Extraction
查看>>
java并行体系结构
查看>>
探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)
查看>>
ArcGIS Javascript API 1.2 Released
查看>>
命令行构建Unity项目
查看>>
C# ArrayList(数组列表)
查看>>
新近碰到的病毒(TR.Spy.Babonock.A)
查看>>
Eliminate Witches!
查看>>
ToString格式化
查看>>
HDU 4819 Mosaic D区段树
查看>>
js小技巧
查看>>
拖动条SeekBar及星级评分条
查看>>
分享20个Android游戏源码,希望大家喜欢哈!
查看>>
Metro Style App开发快速入门 之文件选择总结
查看>>
部分背包问题的贪心算法正确性证明
查看>>
AutoCAD 命令统计魔幻球的实现过程--(2)
查看>>
关于Tool接口--------hadoop接口:extends Configured implements Tool 和 ToolRunner.run
查看>>