iconfont介绍及基本使用

快来打我* 2023-03-01 13:29 15阅读 0赞

> 在看别人 github 项目的时候，看到了 iconfont，百度了一下是阿里的图标库，这个很容易理解，但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件，对于这些新东西感到有些陌生，在经过一番查找之后有所得，整理思路，记录于此。

# 一、Iconfont #

### 1. 概述 ###

在前端作业中，二十年前只有页面中铺满文字就算上线产品，现如今，不加点俏皮的“图标”会让页面显得很 Low 很 Low。

![format_png][]

图标

在写这篇文章之前，我一直以为上图中的“图标”是一个个的图片组成，但学习总是给人新知，现在我知道了它们只是一种字体，类似于“宋体”、“楷体”这种。如果我们要使用它们，也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法，刚兴趣的可以自行阅读 [@font-face 用法][font-face] 。

### 2. Iconfont 介绍 ###

Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体，你可以选择下载到本地，在你的项目中引入这种字体，这样即便没有网络的情况也可以使用图标。

这种模式的一大优点就是只挑选出需要的图标，不会像其他图标库那样直接下载一整个图标库的内容，尽管你可能只会使用到其中一到两个图标。要知道，有的项目打包上线对大小是有严格要求的，比如微信小程序打包之后的代码大小就要控制在 1 M以下。

关于如何使用 Iconfont，网络已经有人赘述的很详细了，这里就不再重复。具体步骤参阅： [iconfont字体图标的使用方法][iconfont]。

注：除了阿里的 Iconfont，Bootstrap 的图标是 Font-Awsome。

# 二、字体格式 —— .eot、.woff、.ttf、.svg #

### 1. 概述 ###

在阿里图标库中下载图标到本地后，目录结构如下：

![format_png 1][]

图标库下载到本地目录结构

第一次看到这几个文件时，不知道有什么用，可能会直接删除，但万万不可，打开 iconfont.css 文件可以在 @font-face 中都有引用这几个文件。查询资料后得知：虽然现代浏览器支持自定义字体样式，并且可以通过 @font-face 引入自定义的字体，但是各个浏览器对于字体样式是存在兼容性问题的，而这几个文件就是分别处理对应浏览兼容性问题的。

### 2. 字体格式介绍 ###

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。【支持的浏览器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。【支持的浏览器：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

EOT

Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。【支持的浏览器：IE4+】

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。【支持的浏览器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

### 3. 使用 @font-face 引入字体格式 ###

因为各个浏览器对字体格式的不兼容，作为前端开发人员，我们需要考虑的全面性，将各个格式的字体都引入进来，这样就不怕刁钻的用户使用哪种浏览器了。

常见兼容性写法：

@font-face {
      font-family: 'yourfontname';
      src: url('../fonts/singlemalta-webfont.eot');
      src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/singlemalta-webfont.woff') format('woff'),
           url('../fonts/singlemalta-webfont.ttf') format('truetype'),
           url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
      font-weight: normal;
      font-style: normal;
    }

如果你是使用 Iconfont 下载字体到本地，那么恭喜你，打开 iconfont.css 文件，可以看到 Iconfont 已经帮助你配好了这些内容，你只需要在页面中引入 iconfont.css 即可直接使用。

# 基本使用：》》》》》》》》》》》》》》》》》》 #

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;

**step 1**:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;

**step 2**:找到图标管理->我的项目->然后新建项目:

![format_png 2][]

右边点击新建项目,用于保存自己常用的图标;

![format_png 3][]

step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

![format_png 4][]

我现在将第一个安卓图标加入我的项目,点击加入购物车

![format_png 5][]

step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;

![format_png 6][]

自动跳转到对应的项目里了,如图:

![format_png 7][]

step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

![format_png 8][]

下载下来解压后的文件如下:

![format_png 9][]

**强调一次,把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件**

![format_png 10][]

step 6:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

![format_png 11][]

具体代码如下:

![format_png 12][]

好了,刷新页面,图标是不是出来了呢?

![format_png 13][]

Ok,到这一步,恭喜你成功了,是不是很简单,不简单?那就从头再看一遍;

**调节字体图标的大小是通过元素的font-size属性来控制的;**

[format_png]: /images/20230208/3615879827954884b47fd9f6927dca9f.png
[font-face]: https://www.jianshu.com/p/c0301e632a01
[iconfont]: https://link.jianshu.com?t=http://www.cnblogs.com/hjvsdr/p/6639649.html
[format_png 1]: /images/20230208/7b755a7cecc042aeb0bfec4a5ca1231d.png
[format_png 2]: /images/20230208/c620373d306a44e5a84bff9412cd3218.png
[format_png 3]: /images/20230208/d0106ef3bc5d4c47be2b7bbb8342a7d4.png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MDYzMjk5OC0xMjQ1ODA5MzE0LnBuZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MDczMjMyNi0xNjM0MDM4MTc0LnBuZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MTEzMDA0NS0xNjQ4MTAzNTgzLnBuZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MTM1MDQwNC00MjkwODUwOTgucG5n?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MTYwMjU5Mi0yMDY2OTc0Njg5LnBuZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MTcwNzEwOC0xNTM0NDUxNTE5LnBuZw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MTk1ODY3MC0yMDgwMTQ4NTYucG5n?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MjIzNzY3MC0xMjE1Mzk0OTc1LnBuZw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MjMyNjQ2Ny05NTI5MDg5NTAucG5n?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvMTExNjA2OS8yMDE3MDMvMTExNjA2OS0yMDE3MDMyOTE1MjQwODIzMy0xNTUxNTgxMDk4LnBuZw?x-oss-process=image/format,png