字体图标库的使用

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

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

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. PAUL ADAMS ARCHITECT：澳洲房贷最低利率来袭

    11月3日澳洲储备银行宣布将官方现金利率从0.25%降至0.1%,破历史最低纪录.此次澳洲储备银行降息的目的主要是为了刺激经济走出全球经济危机引发的衰退.据了解,这已经是澳洲今年第三次降息,也是自20 ...

  2. Mac mini M1使用简单体验(编程、游戏、深度学习)

    好久不见了各位! 前一阵子忍不住剁手买了M1芯片的mac mini,为了弥补自己的内疚感就卖了自己的旧的mbp2017款.数据也完全迁移到了新机器上,之前的工作也就由mbp2017彻底换成mac mi ...

  3. 官网GitLab CI/CD英文文档翻译

    在查阅GitLab官网的CI/CD功能说明时,全是英文看起来不方便,通过翻译软件自动翻译后"内容失真",看起来很变扭.查阅了百度上的资料发现很多翻译很老旧,有些甚至是挂羊头卖狗肉. ...

  4. ASP.NET Core获取请求完整的Url

    在ASP.NET项目中获取请求完整的Url: 获取System.Web命名空间下的类名为HttpRequestBase的Url方法: /// <summary>在派生类中替代时,获取有关当 ...

  5. 如何使用GraphQL Client: Apollo Android

    如何使用GraphQL Client: Apollo Android 一个Android app, 如何使用GraphQL. 本文以最流行的Apollo Android为例来说明. 添加依赖 首先, ...

  6. Nifi组件脚本开发—ExecuteScript 使用指南（三）

    上一篇:Nifi组件脚本开发-ExecuteScript 使用指南(二) Part 3 - 高级特征 本系列的前两篇文章涵盖了 flow file 的基本操作, 如读写属性和内容, 以及使用" ...

  7. 可以设置过期时间的Java缓存Map

    前言 最近项目需求需要一个类似于redis可以设置过期时间的K,V存储方式.项目前期暂时不引进redis,暂时用java内存代替. 解决方案 1. ExpiringMap 功能简介 : 1.可设置Ma ...

  8. nginx+php-fpm docker镜像合二为一

    一.概述 在上一篇文章介绍了nginx+php-fpm,链接如下: https://www.cnblogs.com/xiao987334176/p/12918413.html nginx和php-fp ...

  9. spring-Cloud初步依赖

    <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...

  10. 剑指 Offer 63. 股票的最大利润 + 动态规划

    剑指 Offer 63. 股票的最大利润 Offer_63 题目描述 方法一:暴力法 package com.walegarrett.offer; /** * @Author WaleGarrett ...