项目中，虽然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. MySql:Table 'database.TABLE_ONE' doesn't exist

    1. 问题描述 由于最近使用本地的MySQL奔溃了,在修改管理员密码时,不慎修改错误,导致无法重新写会,甚至按照MySQL官网手册都无法修改正确,遂放弃修改root密码,直接将一个未有数据的纯净版My ...

  2. supervisor管理进程工具配置

    Supervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统 ...

  3. beta到production版本上线

    1.beta版本到production上线,production要发到预发布测试一下避免配置问题导致发布异常.

  4. Python数据可视化系列-02-pyecharts可视化非常cool

    pyecharts介绍 pyecharts网站 Pyecharts生成的图像,动态效果非常cool.在HTML上展示很是perfect.matplotlib用于科研,但是pyecharts用于展示和讲 ...

  5. 潭州课堂25班：Ph201805201 爬虫基础 第一课 (课堂笔记)

    爬虫的概念: 其实呢,爬虫更官方点的名字叫数据采集,英文一般称作spider,就是通过编程来全自动的从互联网上采集数据.比如说搜索引擎就是一种爬虫.爬虫需要做的就是模拟正常的网络请求,比如你在网站上点 ...

  6. 潭州课堂25班：Ph201805201 第五课：格式化输出和深浅复制 (课堂笔记)

    格式化输出和字符串转义 占位符 使用示意 作用 %s '%s %s' % ('hello', 'world') 表示占位的是str %d '%d %d' % (1, 2) 表示占位的是int %d ' ...

  7. gitbook构建文档命令

    安装node: sudo ln -s /opt/node-v8.3.9-linux-x64/bin/node /usr/local/bin/node sudo ln -s /opt/node-v8.3 ...

  8. 非常简单的方法实现ViewPager自动循环轮播

    非常简单的方法实现ViewPager自动循环轮播,见红色代码部分,其它的代码可以忽略不看. 简洁高效是我解决问题的首要出发点. package com.shuivy.happylendandreadb ...

  9. win7 64位系统彻底卸载mysql

    一.在控制面板中卸载mysql软件,卸载后删除mysql安装目录下的所有文件 二.windows+R运行“regedit”文件,打开注册表 三.删除注册表:HKEY_LOCAL_MACHINE\SYS ...

  10. Qt.常用代码整理

    窗口全屏化(此方法只对顶级窗口有效,对子窗口无效) window.showFullScreen() 字符串处理 Qt还提供了一种方便的字符串组合方式,使用QString::arg()函数,此函数的重载 ...