字体图标库的使用

这是之前留下的博客，由于一堆博客没写完，本周周末做了个补充，可能内容上会有点不太斜街，请见谅...

  • 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式

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 标签

  • 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 的维护管理与使用探索的更多相关文章

  1. vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  2. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  3. !!字体图标（iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等）。 图片压缩

    http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.c ...

  4. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  5. css3 - 字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...

  6. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  7. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  8. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  9. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

随机推荐

  1. NGK数字钱包的特点是什么？NGK钱包的优点和缺点是什么？

    说起区块链数字资产,那就离不开谈到数字钱包.数字钱包不仅有资产管理的功能,还可以进行资产理财.资产交易,甚至能为公链DAPP导流. 对于NGK公链而言,其数字钱包已然成为了解NGK公链的基础条件.NG ...

  2. 「NGK每日快讯」11.23日NGK公链第21期官方快讯！

  3. Prometheus时序数据库-内存中的存储结构

    Prometheus时序数据库-内存中的存储结构 前言 笔者最近担起了公司监控的重任,而当前监控最流行的数据库即是Prometheus.按照笔者打破砂锅问到底的精神,自然要把这个开源组件源码搞明白才行 ...

  4. 配置JDK环境及其相关问题

    1.首先找到JDK的安装目录 如果忘记了安装目录在那个地方,可以通过dos命令java -verbose,进行查看 配置jdk环境 新建系统变量JAVA_HOME: 编辑系统变量Path: 新建系统变 ...

  5. mysql主从备份说明（win系统）

    1. 环境描述: 主机:192.168.2.201 从机:192.168.2.111 Mysql版本:5.7 2. 主机my.ini配置: log-bin=C:\mysqlback expire-lo ...

  6. MySQL学习笔记（五）

    倒数第二天!冲冲冲!!! 一.索引 一个表里面可以有多个索引. 1. 索引的作用:约束与加速查找 无索引:从前到后依次查找 有索引:会为索引列创造一个额外文件(以某种格式存储).在使用索引进行查找时, ...

  7. 手把手教你手写一个最简单的 Spring Boot Starter

    欢迎关注微信公众号:「Java之言」技术文章持续更新,请持续关注...... 第一时间学习最新技术文章 领取最新技术学习资料视频 最新互联网资讯和面试经验 何为 Starter ? 想必大家都使用过 ...

  8. Hi3559AV100的VI细节处理说明

    因为项目后期涉及到MPP平台下的VI接口,现把有关视频输入VI模块的实现细节总结,也方便大家进一步了解. 1.整体概述 视频输入(VI)模块实现的功能:通过 MIPI Rx(含 MIPI 接口.LVD ...

  9. c++移动构造

    下面随笔给出c++移动构造. 在现实中有很多这样的例子,我们将钱从一个账号转移到另一个账号,将手机SIM卡转移到另一台手机,将文件从一个位置剪切到另一个位置--移动构造可以减少不必要的复制,带来性能上 ...

  10. Semaphore实战

    简介 Semaphore信号量计数器.和CountDownLatch,CyclicBarrier类似,是多线程协作的工具类,相对于join,wait,notify方法使用起来简单高效.下面我们主要看看 ...