LV02-NexT-05-图标库

发表于 2023-07-02 分类于博客搭建本文字数： 4.5k 阅读时长 ≈ 16 分钟

本文主要是Hexo框架下图标库使用的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。

点击查看使用工具及版本

Windows	windows11
Ubuntu	Ubuntu16.04的64位版本
VMware® Workstation 16 Pro	16.2.3 build-19376536

点击查看本文参考资料

参考方向	参考原文
---	---

点击查看相关文件下载

---

在NexT主题中，默认是使用Font Awesome图标库的，它已经包含了大部分的图标，可以自定义显示的颜色，而且有些图标也支持动态效果，但是有一些需要用到的图标就不在可用之列了，这个时候就可以引入阿里矢量图标库(iconfont)来添加自己所需要的图标，本文将介绍如何使用Font Awesome图标库，以及如何引入和使用阿里矢量图标库(iconfont)。

一、`Font Awesome`图标库

1. 简介

Font Awesome其实是一种字体，它提供可缩放矢量图标，不需要JavaScript支持，可以被定制大小、颜色、阴影以及任何可以用CSS的样式。它有两种版本，一种是Free的免费版本，一种是Pro的收费版本，收费版本的图标图标自然是比免费版本的要多喽，不过免费版的大部分就够用了，实在不行，还可以使用另一种图标库。

名称	网址
开源项目仓库	https://github.com/FortAwesome/Font-Awesome
官网网址	https://fontawesome.com/

在NexT主题中已经自动安装并引用了相关的文件，这里便不再重复说明如何安装该图标库。

若有需求，可点此查看主题中引用该图标库的相关部分

yaml [blogRoot]/themes/next/_vendors.yml

fontawesome:
  name: '@fortawesome/fontawesome-free'
  version: 5.15.3
  file: css/all.min.css
  alias: font-awesome
  integrity: sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=

2. 图标库的使用

2.1 基础应用

html

1 2	<!-- this icon's (1) style prefix == fas and (2) icon name == camera --> <i class="fas fa-camera"></i>

示例：

html

1 2	<!-- using a <span> element to reference the icon --> <span class="fas fa-camera"></span>

示例：

2.1.2 图标添加样式

添加span标签修改样式
直接修改样式

html

<span style="font-size: 1em; color: #DA70D6;"><i class="fas fa-camera"></i></span>
<span style="font-size: 16px; color: #8A2BE2;"><i class="fas fa-camera"></i></span>
<span style="font-size: 1rem;">
  <span style="color:	#00BFFF;"><i class="fas fa-camera"></i></span>
</span>

示例：

html

1
2
3

<i class="fas fa-camera" style="font-size: 1em; color: #DA70D6;"></i>
<i class="fas fa-camera" style="font-size: 16px; color: #8A2BE2;"></i>
<i class="fas fa-camera" style="font-size: 1rem; color:	#00BFFF;"></i>

示例：

2.1.3 图标大小

图标的大小除了可以直接添加样式来改变之外，还可以在引用的时候改变，这就方便了在不修改主题源码的情况下改变主题中显示的图标的大小，这中样式下，可以指定基准字体的大小，来确定图标的相对大小，当然也可以不指定，这样将采取默认的方式。

点击查看图标大小对应关系

Class	Size
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

html

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

示例：

html

<div style="font-size: 0.5rem;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>

示例：

html

<div style="font-size: 20px;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>

示例：

2.2 进阶应用

这里的进阶应用中不写基础应用中可用样式，但是可以在基础应用的条件下增加进阶应用的这些样式，两者可以并存。

官方参考文档：fontawesome官方帮助文档

2.2.1 旋转图标

点击查看旋转变量对应关系

Class	Rotation Amount
fa-rotate-90	90°
fa-rotate-180	180°
fa-rotate-270	270°
fa-flip-horizontal	mirrors icon horizontally
fa-flip-vertical	mirrors icon vertically
fa-flip-both	mirrors icon vertically and horizontally (requires 5.7.0 or greater)

Rotating Icons
Rotating+Flipping

html

<div class="fa-3x">
  <i class="fas fa-snowboarding"></i>
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>
  <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  <i class="fas fa-snowboarding fa-flip-vertical"></i>
  <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

示例：

html

<div class="fa-3x">
  <!-- A icon that's rotated 90 degress and flipped horizontally -->
  <span class="fa-rotate-90" style="display: inline-block;">
    <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  </span>

  <!-- A icon that's flipped horizontally and rotated 90 degrees  -->
  <span class="fa-flip-horizontal" style="display: inline-block;">
    <i class="fas fa-snowboarding fa-rotate-90"></i>
  </span>

  <!-- A icon that's flipped vertically and rotated 270 degress  -->
  <span class="fa-flip-vertical" style="display: inline-block;">
    <i class="fas fa-snowboarding fa-rotate-270"></i>
  </span>

  <!-- A icon that's rotated 270 degress and flipped vertically -->
  <span class="fa-rotate-270" style="display: inline-block;">
    <i class="fas fa-snowboarding fa-flip-vertical"></i>
  </span>

  <!-- A icon that's flipped on both axes and arbitrarily rotated 45 degress  -->
  <span class="fa-flip-both" style="display: inline-block;">
    <i class="fas fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>
  </span>

  <!-- A icon that's arbitrarily rotated 45 degres and flipped on both axes  -->
  <span class="fa-rotate-by" style="display: inline-block; --fa-rotate-angle: 45deg;">
    <i class="fas fa-snowboarding fa-flip-both"></i>
  </span>
</div>

示例：

2.2.2 动态图标

html

1 2	<i class="fas fa-bullhorn fa-spin" style="color: #FF1493;font-size: 1.3rem"></i> <i class="fas fa-fan fa-spin" style="color: #FF1493;font-size: 1.3rem"></i>

示例：

二、`iconfont`阿里矢量图标库

阿里矢量图标库中的图标较为丰富，有许多Font Awesome没有的图标，也含有许多的多色图标，下边就介绍如何在NexT中使用该图标库。

1. 登录注册

首先去官网进行注册：阿里巴巴矢量图标库，也可以使用自己的Github账号直接登录。

2. 挑选图标

进入首页之后选择菜单栏的【图标库】，然后按下图箭头所指进行自己想要图标的添加，这样会把自己的这些图标添加到购物车。

3. 添加到项目

挑选完图标后，点击界面右上角的购物车图标，此时会在右侧弹出如下界面，然后按箭头添加到项目即可，若还未创建项目，则可按照提示进行项目创建，或者自己提前创建好项目，此处不再提示如何创建项目。

4. 生成代码

添加自己选择的图标到项目之后，可以到【我的项目】界面，如下图所示，该图标库有三种引用方式，分别是Unicode、Font class和Symbol，选择自己想用的引用方式，点击下方的【点此生成】即可生成相应的引用方式，另外要注意的是，不管哪种引用方式，在新增或者删除图标的时候，引用代码都需要进行更新，相应的站点中的相应文件内容也需要更新。

5. 图标引用

官方参考文档：阿里巴巴矢量图标库使用帮助文档

unicode是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

点击查看使用步骤

unicode使用步骤如下：

第一步：拷贝自己项目下面生成的font-face，并添加到样式文件

我这里是自己新建了一个单独的iconfont.styl文件来存放阿里矢量图标库的样式代码，并在[blogRoot]/source/_data/styles.styl进行引用。

stylus [blogRoot]/source/_data/iconfont.styl

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：在iconfont.styl文件中定义使用iconfont的样式

stylus [blogRoot]/source/_data/iconfont.styl

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

html

1	<i class="iconfont">3</i>

效果如下图：

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

点击查看使用步骤

font-class使用步骤如下：

第一步：拷贝自己项目下面生成的font-face，并添加到样式文件

项目中的该种引用方式生成的代码是一个css链接格式，这样的话在styl文件中怎么引用都没有成功，所以就按下边的方法在模板渲染文件中直接加载这个样式文件啦。

nunjuck [blogRoot]/source/_data/head.njk

1	<link href="http://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css" rel="stylesheet" type="text/css"/>

不过呢，我这里是自己新建了一个单独的iconfont.styl文件来存放阿里矢量图标库的样式代码，所以我就将链接中的样式文件给复制下来，并在[blogRoot]/source/_data/styles.styl进行引用，具体代码可以查看自己项目中相应链接中的内容。

第二步：挑选相应图标并获取类名，应用于页面
html
1
<i class="iconfont icon-xxx"></i>

示例：

Symbol是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与前面两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

点击查看使用步骤

Symbol使用步骤如下：

第一步：拷贝项目下面生成的symbol代码并在相应文件引用

由于该种方式生成的是一种脚本文件，所以可以在布局模板文件的注入文件custom-Scripts.njk进行引用使用。

nunjuck [blogRoot]/source/_data/custom-Scripts.njk

1	<script src="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>

第二步：加入通用css代码（引入一次就行）

我这里是自己新建了一个单独的iconfont.styl文件来存放阿里矢量图标库的样式代码，并在[blogRoot]/source/_data/styles.styl进行引用。

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

第三步：挑选相应图标并获取类名，应用于页面

html

1
2
3

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

效果如下图，可以发现该种引用方式可以直接显示多色图标：

对于我来说，还是选择了font-class这种方式，因为这种方式跟Font Awesome是兼容的，不想修改源码的话，这个应该是最方便替换Font Awesome图标的，但是有些地方替换后大小可能与之前不符，在样式里对相应的地方进行修改就可以啦，似乎黑白配色跟NexT才更加相符，我不是很追求图标的颜色多样，方便使用就可以啦，哈哈(ฅ>ω<*ฅ)。

一、Font Awesome图标库

1. 简介

2. 图标库的使用

2.1 基础应用

2.1.1 基础引用格式

2.1.2 图标添加样式

2.1.3 图标大小

2.2 进阶应用

2.2.1 旋转图标

2.2.2 动态图标

二、iconfont阿里矢量图标库

1. 登录注册

2. 挑选图标

3. 添加到项目

4. 生成代码

5. 图标引用

一、`Font Awesome`图标库

二、`iconfont`阿里矢量图标库