在写页面的时候，我们需要引入外部样式来实现网页的开发。图标是网页中不可或缺的一部分，通常我们用iconfont（阿里图标库）以及fontawesome图标库来进行引入。那么如何进行引入呢？下面我给大家写一个教程：

1.1以fontawesome为例：

fontawesome的优点在于首先是内存小，其次重点的重点是免费！

首先我们需要打开fontawesome官网，http://fontawesome.dashgame.com/ ，点击首页的立即下载，然后我们就会得到一个图标库的文件包。然后我们在开发软件中，在css文件下创建一个fa的文件夹。解压压缩包之后，我们打开文件夹，然后把下载的文件拖到我们创建的css文件夹当中，就可以了。「注意：一定要在相同的文件目录内」

然后在head标签内引入图标库

2.以iconfont图标为例：

iconfont是阿里巴巴旗下的图标库，和fontawesome不一样的就是有一大部分是有版权的「注意：因为都是用户上传的，so不可作为商业用途」优点是，量很大，设计的优秀。缺点是如果是彩色的只能按照图片格式来，so只能是单色系的使用图标字体的功能。如果实在是需要iconfont的图标，则需要你们公司内的设计进行绘制之后上传上去，才能使用。

首先，话不多絮，打开iconfont官网，https://www.iconfont.cn/，自己注册个账号然后登陆进去。

在主页的搜索栏中输入你需要的图标的名称，然后会出现一大片你所需要的图标，然后挑选其中你需要的图标进行加入购物车我们得到这样一个装满东西的购物车：

然后点击添加至项目，弹出项目页面「没有项目的，官网会引导你先自己创建项目，这里我就不截图了」，添加或者创建好之后会进入到我的项目页面中「注意：下次打开官网之后，登陆了直接在顶部导航内的我的项目中即可」

好了 ，我们现在已经得到所需要的字体图标。然后我们点击上面的下载至本地，我们得到一个文件的压缩包，保存至桌面。然后回到我们的开发软件中，创建一个iconfont的文件夹，把我们下载的文件包解压之后，将所有的文件包不管三七二十一拖入这个文件夹中，然后将含有demo的文件全部删除！然后我们看到里面有个iconfont.css的文件，就是我们所需要引入的文件。我们直接在我们的html文件中引入这个文件

写法如下：

i.iconfont{

    fontsize:100px;

}



or

两种写法都可行。

好了两种方法都写了，这是些静态页面的，小白还在持续学习中，会不断更新。。。