项目中，虽然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打包方法——Pyinstaller (转)

      Python版本:Python3.5.2 一.安装Pyinstaller 1.安装pywin32 下载安装文件:查找到跟自己适用的python版本及window系统版本匹配的pywin32,下载后 ...

  2. 计蒜客 无脑博士的试管们 【dfs】

    题目链接:https://nanti.jisuanke.com/t/31 题目大意: 无脑博士有三个容量分别是A,B,C 升的试管,A,B,C 分别是三个从 1 到20 的整数,最初,A 和 B 试管 ...

  3. 利用zabbix监控oracle数据库

    一.概述 zabbix是一款非常强大,同时也是应用最为广泛的开源监控软件,本文将给大家介绍如何利用zabbix监控oracle数据库. 二.环境介绍 以下是我安装的环境,实际部署时并不需要跟我的环境一 ...

  4. HQL count(*)

    public int getTarPage() {        String hql = "'";        Query query = getSession().creat ...

  5. Python学习——Python线程

    一.线程创建 #方法一:将要执行的方法作为参数传给Thread的构造方法 import threading import time def show(arg): time.sleep(2) print ...

  6. C++中的智能指针

    一.动态内存管理 通常我们创建动态内存的时候,需要自己管理好内存,也就是说,new出来的对象一定要注意释放掉.下面通过例子可以看到这个问题所在: struct BBE{ int X; int Y; v ...

  7. BZOJ.2199.[USACO2011 Jan]奶牛议会(2-SAT)

    题目链接 建边不说了.对于议案'?'的输出用拓扑不好判断,直接对每个议案的结果DFS,看是否会出现矛盾 Tarjan也用不到 //964kb 76ms #include <cstdio> ...

  8. float类型数保留一位小数

    float类型数保留一位小数 float a = 2.5f; float b = 1.2f; System.out.println(a/b); System.out.println((float)(M ...

  9. Charles抓包http和https

    本来不打算写的,度娘一搜一大堆各种教程,实在是网上的各种设置的各种坑都有,我还是站在巨人的肩膀上汇总一下吧 首先http的就不用说了,各种教程版本区别不大,也没什么坑,主要是https: 第一步先下载 ...

  10. DNS解析全过程分析

    DNS解析过程 1.检查浏览器缓存中是否缓存过该域名对应的IP地址 用户通过浏览器浏览过某网站之后,浏览器就会自动缓存该网站域名对应的IP地址, 当用户再次访问的时候,浏览器就会从缓存中查找该域名对应 ...