字体图标库的使用

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

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

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的去中心化自治实践，更人性化的DAO

    2020年,DeFi市场市场火爆的同时,引爆了流动性挖矿的市场.行业内对DAO的思考也在源源不断进行,特别项目治理通证发行之前,DAO的去中心化的治理理念,是区块链属性中的重要的一环,也已引发了不同项 ...

  2. MySQL的简单使用方法备忘

    这只是一篇我的个人备忘录,写的是我常用的命令.具体可以参考"菜鸟教程" https://www.runoob.com/mysql/mysql-tutorial.html 登录(用户 ...

  3. 如何在一台开发机中同时配置github、gitlab等多个账户

    本文参考博文. 如果公司的代码同步环境在gitlab上,而自己有很多项目托管在github.我们需要做一些额外的配置实现两者的无缝切换. 步骤 我的开发机是macbook,如果属于不同系统,找到该系统 ...

  4. 【原创】Linux虚拟化KVM-Qemu分析（十）之virtio驱动

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: KVM版本:5.9 ...

  5. SpringBoot解决特殊符号 []报400问题

    当遇到特殊符号传递给后台时,如果不加处理,就会报400的错误,解决办法有两种. 1.前台解决 前台解决的方法就是把这些特殊符号转义,转义之后浏览器和后台都可以识别. //对特殊字符进行转义 encod ...

  6. Java流程控制：选择结构

    一.选择结构 选择结构用于判断给定的条件,根据判断的结果来控制程序的流程. Java中选择结构的语法主要分为'if...else'语句和'switch...case'语句. Java中选择结构语句在语 ...

  7. dpi dp px 换算关系

    getResources().getDisplayMetrics().densityDpi 就是屏幕密度.getResources().getDisplayMetrics().density 也可以理 ...

  8. Redis-第十章节-链表

    目录 数组和链表 链表 对比 总结 1.数组和链表 数组: 数组会在内存中开辟一块连续的空间存储数据,这种存储方式有利也有弊端.当获取数据的时候,直接通过下标值就可以获取到对应的元素,时间复杂度为O( ...

  9. 单细胞分析实录(9): 展示marker基因的4种图形（二）

    在上一篇中,我已经讲解了展示marker基因的前两种图形,分别是tsne/umap图.热图,感兴趣的读者可以回顾一下.这一节我们继续学习堆叠小提琴图和气泡图. 3. 堆叠小提琴图展示marker基因 ...

  10. CentOS7 安装 MySQL Cluster 7.6.7

    引用自:http://lemonlone.com/posts/mysql-ndb-cluster-install/ 仅做备份和配置文件更改 1.先在VMware中安装 CentOS-7-x86_64- ...