项目中，虽然layui的字体图标库中已经有了1000多个图标了，但是也有时候不能满足我们自定义图标的需求，所以需要进行自定义，具体步骤如下：

1.在iconfont上找到自己喜欢的图标，也可以上传ui做好的图标，做自己喜欢的图标，加入购物车后导出字体图标；

2.打开icoMoon网站，将自己导出的图标中的svg文件和layui中的svg文件一起导入，然后selectAll。

3.generate字体.

4.将生成的字体图标里面的style.css引入页面，然后使用；

扩展layui中的自带字体图标的更多相关文章

  1. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  2. MVC.NET 发布后，部署到iis ，网站中的Bootstrap的字体图标不能正常显示

    时隔多日没有在博客中记录自己遇到的问题及解决方案了 ,今天给大家分享一个可能会遇到的一个鸡肋bug ! 如果你的项目是MVC并且在项目中引用了 Boostrap 框架,你在编辑发布后部署到iis的时候 ...

  3. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  4. react-native中使用自定义的字体图标iconfont

    iconfont图标库下载 可在 http://www.iconfont.cn 下载 下载完成后的目录中有字体文件: iconfont.ttf 拷贝字体文件 Android: 在 Android/ap ...

  5. Winfrom中如何使用Iconfont字体图标补充

    1.参考技术文章:http://www.cnblogs.com/isaboy/p/csharp_Font_Awesome_window_form_icon.html 2.参考后主要纠结在图标的unic ...

  6. 认识CSS中字体图标

    前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

  7. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一．图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  8. 007：CSS字体图标

    目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好 ...

  9. layui 自定义字体图标 扩展

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标 ...

随机推荐

  1. Python 枚举【一】

    1. 枚举的定义 首先,定义枚举要导入enum模块. 枚举定义用class关键字,继承Enum类. 用于定义枚举的class和定义类的class是有区别[下一篇博文继续分享]. 示例代码: from ...

  2. PHP 随笔记

    SQL插入数据并返回刚插入数据行的主键ID INSERT INTO `peoplespublic`.`demo` (`id`, `name`, `content`, `time`, `file`) V ...

  3. Linux学习之常用文件处理命令(一)

    (一)文件命名规则 (二)常用文件处理命令 1.ls命令 2.cd命令 3.pwd命令 4.mkdir命令 5.touch命令 6.cp命令 7.mv命令 8.rm命令 9.cat命令 10.more ...

  4. SpringMVC框架09——@ResponseBody的用法详解

    @ResponseBody可以标注在方法上也可以标注在类上面.简单来说,当标注在方法上时,该方法的返回结果直接转成JSON格式:当标注在类上时,该类中的所有方法的返回结果都转换成JSON格式. 代码示 ...

  5. Web大前端面试题-Day10

    1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16 ...

  6. phpstorm在项目中查找某个字符串

    如果项目过大,想在整个项目中找某个字符串,又不知道该字符串所在文件的路径,这时候就可以使用全局搜索了,ctrl+shift+F.在mac下,快捷键是command+shift+F:    

  7. C#编程（八十三）---------- 程序集的含义

    程序集的含义 一.程序集是包含一个或多个类型定义文件和资源文件的集合.它允许我们分析可重用类型的逻辑表示和物理表示. 相当于你定义了一个项目XXProject,项目存在很多文件(类,窗体,接口,资源等 ...

  8. Go语言之高级篇beego框架之配置beego环境

    1.配置beego环境 进入部署目录中 软件部署目录: 把要部署的软件代码,放在src目录下面. 启动项目

  9. C++中的extern

    这篇文章解释的简单明了: https://stackoverflow.com/questions/10422034/when-to-use-extern-in-c This comes in usef ...

  10. jsp使用c:forEach报错 javax.servlet.jsp.PageContext.getELContext()Ljavax/el/ELContext的问题

    今天发现了一个折磨我一天的问题: 在jsp文件中使用 <c:forEach items="${checkResult}" var="item"> & ...