字体图标库 iconfont、iconmoon 的维护管理与使用探索
字体图标库的使用
这是之前留下的博客，由于一堆博客没写完，本周周末做了个补充，可能内容上会有点不太斜街，请见谅...
- 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式
iconfont-阿里矢量图标库
登录/注册
打开阿里矢量图标库地址：https://www.iconfont.cn/home/index，并使用 github 账号注册/登录
搜集需要的图标
选中菜单的图标库，然后点击页面右侧的红色搜索按钮
如下图是我搜索 地图 出来的图标库列表
在首页搜索你想要的图标（中英文都 ok）
维护项目图标库
有两种方式，下文以本地使用的方式展开
1.使用在线地址引入 iconfont，每次线上改完就生效貌似每次改完地址都会变，后续自己测试一下
2.下载到本地使用，每次改完重新下载压缩包替换
更改图标
1.直接编辑图标做更改，然后下载替换
- 对图标在网格中的位置、大小、旋转角度进行调整
2.上传新图标来替换
- 点击商场替换 icon
新增图标
iconfont 网站上面搜、找
找到了加到购物车，然后添加至项目，然后下载替换即可
自制 svg 图标，上传到 iconfont 上
找设计同事要来 svg 格式的图标，传到 iconfont 上，添加至项目，下载替换原文件
可以一次选中多个图标上传
删除图标
直接在项目里删除，然后重新下载文件或重新生成链接应用即可
接手老项目开发（扩展图标）
今天一探索，对于 iconfont 还存在着一个问题
对于接手的老项目，想要扩展字体图标怎么办？
- 如果有在线 iconfont 项目，把你拉进去作为项目成员当然好，如果人家离职了，没有在线 iconfont 项目或者不拉你进去？
方案一：新建 iconfont 项目，编辑项目，更改 Font Family 为其他值（推荐，方便再后续维护以及自己找图标）
没有项目用的 iconfont 项目，就只能自己新建一个咯？
- 注意 Font Family 写另外的值
然后往里面添加图标...
下载 iconfont 项目图标库到本地，放到项目目录下
- demo 目录结构如下
.
│ index.html
│
├─iconfont
│ demo.css
│ demo_index.html
│ iconfont.css
│ iconfont.eot
│ iconfont.js
│ iconfont.json
│ iconfont.svg
│ iconfont.ttf
│ iconfont.woff
│ iconfont.woff2
│
├─iconfont-new
│ demo.css
│ demo_index.html
│ iconfont.css
│ iconfont.eot
│ iconfont.js
│ iconfont.json
│ iconfont.svg
│ iconfont.ttf
│ iconfont.woff
│ iconfont.woff2
│
└─img
bg.png
页面里引入该 css，在页面上使用
- 两个 iconfont 项目图标库使用案例如下（主要是新的 iconfont 图标怎么用，旧的不用管，直接替换就行了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 老 iconfont 项目的引用 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<!-- 新 iconfont 项目的引用 -->
<link rel="stylesheet" href="./iconfont-new/iconfont.css">
</head>
<body>
<!-- 老 iconfont 项目的图标引用方式（不变） -->
<i class="iconfont icon-kpi"></i>
<!-- 新 iconfont 项目的图标引用方式，iconfont 要改为创建项目时使用的 Font Family 名 -->
<i class="iconfont-new icon-bus-fill"></i>
</body>
</html>
方案二：国外平台 iconmoon 扩展（不需要翻墙，访问速度也还好）
iconfont 的 iconfont.svg 文件可以直接导入到 iconmoon 平台里，后续用 iconmoon 来做扩展，对图标进行管理
基本功能介绍
- 鼠标状态在编辑时，可以对单个图标进行修改
单个图标的修改
- 包括标签 class 名的更改、图标的替换
导出字体图标到项目中使用
选中要导出的图标（注意鼠标状态）
点击 Generate Font
可以对 iconmoon 字体图标做一些整体配置
- icon 前缀、图标使用 icon 名、默认使用 i 标签
- icon 前缀、图标使用 icon 名、默认使用 i 标签
Download，将文件引入项目使用即可（动图演示如何选中图标到下载图标包）
（压缩包里的 .svg 文件也可以直接拿来导入 iconmoon，对原有图标进行管理）
页面使用
目录结构
│ index.html
│
└─iconmoon
│ demo.html
│ Read Me.txt
│ selection.json
│ style.css
│
├─demo-files
│ demo.css
│ demo.js
│
└─fonts
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标使用 demo</title>
<!-- 引入 iconmoon 的样式文件 -->
<link rel="stylesheet" href="./iconmoon/style.css">
<style>
body {
font-size: 55px;
color: red;
}
</style>
</head>
<body>
<i class="icon-mutil2pure-color-pyq"></i>
<i class="icon-pure-color-pyq"></i>
<!-- 这是多色图标用法 -->
<span class="icon-mutil-color-pyq"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span></span>
<!-- <i class="icon-mutil-color-pyq"></i> -->
</body>
</html>
iconfont 与 iconmoon 的使用案例下载
- 由于这是之前起草的博客，最近才做的完善，demo 和此博客后续内容不太相关，但原理是相同的，不知道怎么用的网友可以看下 demo
链接：iconfont-demo（包含了 iconmoon）
js 脚本操作页面...
做了个思路扩展，以后都可以使用 js 脚本来做一些操作，减少手动操作成本...
- 给页面引入 jquery
let importJs=document.createElement('script') // 在页面新建一个script标签
importJs.setAttribute("type","text/javascript") // 给script标签增加type属性
importJs.setAttribute("src", 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js') // 给script标签增加src属性， url地址为cdn公共库里的
document.getElementsByTagName("head")[0].appendChild(importJs) // 把importJs标签添加在页面
- 执行加入购物车的点击事件
$('.block-icon-list .icon-cover span[title="添加入库"]').length // 如果等于 0，就是选择器写的有问题，或许 iconfont 规则改了...
$('.block-icon-list .icon-cover span[title="添加入库"]').click()
扩展阅读（推荐阅读）
字体图标库 iconfont、iconmoon 的维护管理与使用探索的更多相关文章
- vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- !!字体图标（iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等）。 图片压缩
http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...
- 小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...
- [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
- WPF使用矢量字体图标(阿里巴巴iconfont)
原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ...
随机推荐
- NGK项目好不好？
在谈NGK项目之前,我们不得不提到NGK背后的研发团队,硅谷顶尖技术团队灵石团队.硅谷作为全世界最顶尖的高新技术和科技创新产业区,NGK.IO区块链系统正是在此处诞生. 灵石部门核心成员曾负责过多个P ...
- 前端监控SDK开发分享
目录 前言 收集哪些数据 性能 错误 辅助信息 小结 客户端SDK(探针)相关原理和API Web 微信小程序 编写测试用例 单元测试 流程测试 提供Web环境的方式 Mock Web API的方式 ...
- Python学习笔记_有关tuple的几点强调
创建只有一个元素的tuple,需要用逗号结尾消除歧义 a_tuple = (2,) tuple中的list mixed_tuple = (1, 2, ['a', 'b']) print("m ...
- Python数据结构与算法_反转字符串（08）
编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题. 你可以 ...
- Linux-两种磁盘分区方式
Linux文件设备 要理解Linux,首先要理解Linux文件结构 在Linux操作系统中,几乎所有的设备都位于/dev目录中 名称 作用 位置 SATA接口 电脑硬盘接口 /dev/sd[a-p] ...
- linux 安装软件步骤
1,下载wget http://www.erlang.org/download/otp_src_R16B02.tar.gz2,解压 tar -zxvf otp_src_R16B02.tar.gz3,编 ...
- SpringBoot(五):SpringBoot使用拦截器
1.按照SpringMVC的方式编写一个拦截器: 2.配置一个类 implements WebMvcConfigurer 接口 为该类添加注解@Configuration (等价于一个sprin ...
- E: Some index files failed to download. They have been**
转: E: Some index files failed to download. They have been** 问题描述: 当使用Dockerfile从包含cuda的镜像建立新的image的时 ...
- herry菌插件（B站C站）下载与安装（更新中）>>
插件简介: 目前该插件支持chrome浏览器(谷歌浏览器).360极速浏览器等chrome内核的浏览器 最新版插件下载: 点此下载>>>> 安装方法: 1.先下载上面的的插件 ...
- HDOJ-2181（深搜记录路径）
哈密顿绕行世界问题 HDOJ-2181 1.本题是典型的搜索记录路径的问题 2.主要使用的方法是dfs深搜,在输入的时候对vector进行排序,这样才能按照字典序输出. 3.为了记录路径,我使用的是两 ...