字体图标库 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 一样的高度. 例如: ...
随机推荐
- 人物传记Daniel Bolsonaro：永远不要做一个思维单一的人
从小经历了移民和不断辗转迁徙搬家的Daniel Bolsonaro(现就职于灵石团队,职位是核心技术架构师)知道,人生不可能只有一条路,也不要局限于只给自己设立一条路.既然父母能带自己离开巴西来到美国 ...
- js 一元运算符
一元运算符还有一个常用的用法就是将自执行函数的function从函数声明变成表达式. 常用的有 + - - ! void + function () { } - function () { } ~ f ...
- react新手入坑
1.vscode保存react项目的时候由于js-css-html插件格式化代码导致react代码缩进错误 解决方法:禁用js-css-html插件 2.react和vue不同,react方法的定义需 ...
- JUnit5学习之三：Assertions类
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 从跳频技术聊CDMA/WIFI之母海蒂·拉玛传奇的一生
导语:本篇的内容都是 文末的参考文章摘要而来的,本人根据自己的癖好,以及对 海蒂·拉玛 人生的感慨整理成本文. "WiFi"之母的海蒂·拉玛在中国的知名度,比起克劳德·香农应该也不 ...
- 企业安全_DNS流量监控的技术选型
方案1 Windows server n ---> packbeat ---> logstash ---> kafka | ┗ ---------> elasticsearch ...
- 剑指 Offer 09. 用两个栈实现队列 +java中栈和队列的使用
剑指 Offer 09. 用两个栈实现队列 题目链接 class CQueue { private Stack<Integer> sta1; private Stack<Intege ...
- CCF(数据中心)：最小生成树+kruskal算法
数据中心 201812-4 这里就是最小生成树的应用 #include<iostream> #include<cstdio> #include<algorithm> ...
- Codeforces 682C Alyona and the Tree
题目链接:http://codeforces.com/problemset/problem/682/C 分析:存图,用dfs跑一遍,详细见注释 1 #include<iostream> 2 ...
- C#中委托、匿名函数、Lambda表达式的一些个人理解
0x01定义一个委托,相当于定义一个可以存储方法的特殊变量类型 下面我们看具体的代码,通过代码更好理解 delegate void IntMethodInvoker(int x); 这行代码就是声明一 ...