字体图标库的使用

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

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

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 目录结构如下
  1. .
  2. │  index.html
  3. │
  4. ├─iconfont
  5. │      demo.css
  6. │      demo_index.html
  7. │      iconfont.css
  8. │      iconfont.eot
  9. │      iconfont.js
  10. │      iconfont.json
  11. │      iconfont.svg
  12. │      iconfont.ttf
  13. │      iconfont.woff
  14. │      iconfont.woff2
  15. │
  16. ├─iconfont-new
  17. │      demo.css
  18. │      demo_index.html
  19. │      iconfont.css
  20. │      iconfont.eot
  21. │      iconfont.js
  22. │      iconfont.json
  23. │      iconfont.svg
  24. │      iconfont.ttf
  25. │      iconfont.woff
  26. │      iconfont.woff2
  27. │
  28. └─img
  29.         bg.png

页面里引入该 css，在页面上使用

  • 两个 iconfont 项目图标库使用案例如下（主要是新的 iconfont 图标怎么用，旧的不用管，直接替换就行了）
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <!-- 老 iconfont 项目的引用 -->
  10.   <link rel="stylesheet" href="./iconfont/iconfont.css">
  11.   <!-- 新 iconfont 项目的引用 -->
  12.   <link rel="stylesheet" href="./iconfont-new/iconfont.css">
  13. </head>
  15. <body>
  16.   <!-- 老 iconfont 项目的图标引用方式（不变） -->
  17.   <i class="iconfont icon-kpi"></i>
  18.   <!-- 新 iconfont 项目的图标引用方式，iconfont 要改为创建项目时使用的 Font Family 名 -->
  19.   <i class="iconfont-new icon-bus-fill"></i>
  20. </body>
  22. </html>

方案二：国外平台 iconmoon 扩展（不需要翻墙，访问速度也还好）

iconfont 的 iconfont.svg 文件可以直接导入到 iconmoon 平台里，后续用 iconmoon 来做扩展，对图标进行管理

基本功能介绍
  • 鼠标状态在编辑时，可以对单个图标进行修改

单个图标的修改
  • 包括标签 class 名的更改、图标的替换

导出字体图标到项目中使用

  • 选中要导出的图标（注意鼠标状态）

  • 点击 Generate Font

  • 可以对 iconmoon 字体图标做一些整体配置

    • icon 前缀、图标使用 icon 名、默认使用 i 标签

  • Download，将文件引入项目使用即可（动图演示如何选中图标到下载图标包）

（压缩包里的 .svg 文件也可以直接拿来导入 iconmoon，对原有图标进行管理）

页面使用

目录结构

  1. │  index.html
  2. │
  3. └─iconmoon
  4.     │  demo.html
  5.     │  Read Me.txt
  6.     │  selection.json
  7.     │  style.css
  8.     │
  9.     ├─demo-files
  10.     │      demo.css
  11.     │      demo.js
  12.     │
  13.     └─fonts
  14.             icomoon.eot
  15.             icomoon.svg
  16.             icomoon.ttf
  17.             icomoon.woff

使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>字体图标使用 demo</title>
  7.   <!-- 引入 iconmoon 的样式文件 -->
  8.   <link rel="stylesheet" href="./iconmoon/style.css">
  9.   <style>
  10.     body {
  11.       font-size: 55px;
  12.       color: red;
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <i class="icon-mutil2pure-color-pyq"></i>
  18.   <i class="icon-pure-color-pyq"></i>
  20.   <!-- 这是多色图标用法 -->
  21.   <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>
  22.   <!-- <i class="icon-mutil-color-pyq"></i> -->
  23. </body>
  24. </html>
iconfont 与 iconmoon 的使用案例下载
  • 由于这是之前起草的博客，最近才做的完善，demo 和此博客后续内容不太相关，但原理是相同的，不知道怎么用的网友可以看下 demo

链接：iconfont-demo（包含了 iconmoon）

js 脚本操作页面...

做了个思路扩展，以后都可以使用 js 脚本来做一些操作，减少手动操作成本...

  • 给页面引入 jquery
  1. let importJs=document.createElement('script') // 在页面新建一个script标签
  2. importJs.setAttribute("type","text/javascript") // 给script标签增加type属性
  3. importJs.setAttribute("src", 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js') // 给script标签增加src属性， url地址为cdn公共库里的
  4. document.getElementsByTagName("head")[0].appendChild(importJs) // 把importJs标签添加在页面
  • 执行加入购物车的点击事件
  1. $('.block-icon-list .icon-cover span[title="添加入库"]').length // 如果等于 0，就是选择器写的有问题，或许 iconfont 规则改了...
  2. $('.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. 苏黎世财经日报专栏记者玛科尔德表示,随着NGK DeFi的明星代币BGV登上去中心化金融的舞台,它千倍的收益率让生态投资者趋之若鹜. ...

  2. django学习-20.python3中的特殊方法【__str__】的作用

    目录结构 1.前言 2.[__str__]特殊方法的具体使用 2.1.当使用print打印一个类被实例化后生成的对象的时候,若类里有定义了[__str__]特殊方法,是打印出这样的数据:[__str_ ...

  3. CentOS7安装Mysql并配置远程访问

    (su root登录到root账户) 下载repo源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 安装rpm ...

  4. 微信小程序：app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui

    微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...

  5. Java基本概念：类

    一.描述 类是一种抽象的数据类型,它是对某一类事物整体的描述或定义,但是并不能代表某一个具体的事物. 例如,我们生活中所说的词语:动物.植物.手机.电脑等等.这些也都是抽象的概念,而不是指的某一个 具 ...

  6. 图像分割 | Context Prior CPNet | CVPR2020

    文章转自微信公众号:「机器学习炼丹术」 文章作者:炼丹兄(已授权) 作者联系方式:cyx645016617 论文名称:"Context Prior for Scene Segmentatio ...

  7. loadrunner学习笔记一

    这篇笔记主要是针对一个具体的loadrunner脚本里面出现的方法进行解释,具体脚本如下: ` Action() { char *transactionName = "Test"; ...

  8. 利用CORDIC算法计算三角函数

    这里主要先介绍如何利用CORDIC算法计算固定角度\(\phi\)的\(cos(\phi)\).\(sin(\phi)\)值.参考了这两篇文章[1].[2]. 一般利用MATLAB计算三角函数时,用\ ...

  9. 关闭ubuntu防火墙

    1.关闭ubuntu的防火墙 ufw disable 开启防火墙 ufw enable 2.卸载了iptables apt-get remove iptables 3.关闭ubuntu中的防火墙的其余 ...

  10. 前后端分离之DRF——1

    1. 作用 1. 序列化,序列化器会把模型对象转成字典,经过 response 以后变成 json 字符串 2. 反序列化,把客户端发送过来的数据,经过 request 以后变成字典,序列化器可以把字 ...