序文

日常开发网页中，我们可能会遇到各式各样的图标，如：返回键（一般款式为 < ），提示键（一般款式为一个 小灯泡 ），目录（一般款式为一个 菜单状 ）。

这些图标其实都能够通过各大矢量图标库 实现，今日我们要讲的阿里巴巴开发的 iconfont 便是一个图标库，大大方便了图标的运用。

️一、iconfont图标的介绍

光听“图标”，你可能认为，这不便是一张图吗？那用图片不是一个作用！这样想可就大错特错了❌。

实际上 iconfont 是一种字体，而这样的字体显示出来是各式各样的图标。

重点来了，已然它是字体，那么我们能够用常规修正文字的方法来修正 iconfont 图标，后边我将谈到这一点，让我们先看看怎么将 iconfont 图标增加到你的项目当中去 ↓

二、iconfont图标的增加

1. 进入iconfont官网并登录

官网跳转☞：iconfont官网

注册并登录。

2. 点击官方图标库

图示 ↓

3. 挑选图标库

挑选你想要的图标库，这儿我挑选了其中的一个 ↓

4. 挑选图标

挑选你想要的图标，单击图标上的购物车按钮，这个过程很像在商场里购物，不得不说阿里的设计师很有创意。

5. 将挑选的图标增加到项目

（1）点击右上角的购物车按钮

（2）点击增加到项目

（3）新建项目

新建成功，自动跳转到我的项目页面，挑选你自己建的项目，即可呈现方才你挑选的图标。

6. 下载项目压缩包

单击这儿下载整个项目的压缩包。

7. 解压压缩包，存放在网页文件夹中

• 压缩包名字为 download.zip
• 压缩包中会有一个文件夹包括你在 iconfont 网页中的那个项目

  

  这儿主张把这个文件夹改成 iconfont ，而且将这个文件夹拖到网页文件夹中，便于自己识别。

拖入网页文件夹 中。

iconfont 文件夹打开作用如下。

WARNING⚠️ 这儿面的文件不能动

8. 在html中包括iconfont

在 html 文件中的 head 标签内，运用以下代码，便能够通过类挑选器来运用 iconfont 图标了。

<link rel="stylesheet" href="./iconfont/iconfont.css">

三、运用iconfont

回到项目页面，在Font class中单击仿制代码。

这个代码其实便是图标中的第二行的类名。

想运用某个图标，在标签中输入 class="iconfont 类名" 即可,在这儿，我想运用第一个图标。

这个时候，网页中呈现我们类中的第一个图标 作用如下 ↓

四、修正iconfont款式

我们先运用一个类挑选器界说一个 CSS 款式。

在方才的class中加入这个类。

修正成功！

实际上关于文字的属性都能够用于 iconfont 图标的修正，因为 iconfont 图标本质上是文字，而不是图片❌！

⛵五、结束语

看了这么多，大家是不是对 iconfont 的简单运用有所了解了呢，期望能够帮助到你~

⭐Extra

指路作者的 CSDN 三角冻干咖啡的博客