如何在HTML中使用图标字体？

首先,需要有这么个"图标主体"库 ，其次把这个"图标字体"库,引入html页面是图标字体库对应的css引入html ，最后使用"图标字体"库 具体 *** 作。

1.使用百度搜索“(fontello.com)字体”，然后点击进入该官网，是英文的官网；

2.该网站会根据网速的不同，加载起来有点慢，请耐心等待，打开的网站首页，可以显示很多不同的图标；

3.网友朋友可以根据自己不同的需要，然后选择想要的图标，选定的图标会出现选定属性，如果不需要，再点击一下，就可以取消选择，都选择好之后，点击右上角的下载按钮就可以了；

4.下载字体图标之后，是个压缩包，这时可以直接解压即可，得到字体图标的文件夹；

5.打开该文件夹，可以看到里面的css样式文件、字体文件、html文件以及说明文本文档；

6.点击“demo.html”文件，测试一下，自己想要的字体图标文件是否下载完整，这是打开之后，可以看到我们之前选择的几个字体图标；

7.打开Dreamweaver软件，用该软件打开“demo.html”文件，就可以看到字体图标的代码是如何调用的了；

什么是字体图标

字体图标顾名思义就是可以像字体一样使用的图标，你可以像定义字体一样定义它，用font-size给他大小，用color给他颜色，用font-style给他样式。他就像一个字体，只不过他的样子是图标而已。

就像这样的图标，他们并不是用图片，而是就如同一个字体。

字体图标的好处

前端有一个代称就是切图，切下来一张张图，用<img>或者用background来把图片呈现出来。而图片一个最大的弊端。占宽带大，网速不好时加载慢。一旦放大可能容易失真。没法随意的更改颜色。

而字体图标你可以随便放大缩小，只需要改变字体大小，而且永远不会失真。你需要在点击后换一个颜色，无需用js那么麻烦。只需要换一下color。是不是很方便？

如何得到字体图标

这里推荐两个字体图库，第一个是iconfont，这个是我认为最好的。你现在网站上挑选自己要的图标，然后加入购物车，最后一起存为项目。保存到本地。这样一套自己需要的字体图标就搞定了。

第二 个是font-awesome，这一阵套字体库。bootstrap用的就是这一套字体库。缺点是使用无法定制。不如iconfont方便。

你也可以自己制作字体图标，用AI画出后转为SVG格式。这里不多赘述字体图标的制作，因为现成的意见够我们用了。

如何使用字体图标

通过iconfont和fontawesome得到的字体图标，会一个文件夹内包含很多文件。如下图

你不用管太多，直接引入这些文件中的iconfont.css文件就好。当然你也可以不引入css文件，用自己写的css文件，你只需要在自己的css文件中@font-face引入字体图标文件。像这样。

然后就可以开始使用了，这里演示做一个火焰的图标。

使用非常简单，如果你是引入了iconfont.css文件。你只需要给要加入图标的地方加上类名就好。

在iconfont.css文件中，我们看到我们要引入的火焰图标的类名为icon-huo(这个名字是自动生成的）.

接着我们做一个span标签，并给他加入iconfont和icon-huo类名。

效果就出来了

如果你要改变他的大小和，颜色。特别简单

直接改变字体大小和颜色。这里为了演示方便直接写在了html里，规范应该在加入一个类，写在css里。

而且一点都没失真有没有，这样可以完美适应，并且以后做点击后变色效果，再也不用换背景图片了。

当然你也可以不用iconfont.css文件提供的类名，你可以自己定义类，但是定义类后要这样写

注意一定要

1一定要加上font-family:“iconfont”(从iconfont上下载图标字体都叫这个，fontAwesome上下载的叫fontAwesome；

2，:before或者:after插入一个元素，设置content为图标对应的十六进制码。每个图标对应的十六进制码，可以在iconfont.css文件中看到。

①首先，需要有这么个"图标主体"库

②其次，把这个"图标字体"库,引入html页面(是图标字体库对应的css引入html)

③最后，使用"图标字体"库

具体 *** 作：

制作"图标字体"：

①这里以为例子，来制作:

首先，打开网址后，页面右侧有登录按钮，先进行登录 *** 作(后面会说明外面为什么选择登录，也可以不登录。但我还是建议登录。)

②制作图标，这个制作的图标是要svg格式的可以找自己公司的设计师去设计，也可以在里面的图标库搜索自己需要的图标的名称，比如"首页，分类"等。

③ 点击自己选择的首页和分类，它会在这个位置出现：

④然后点击下载到本地，就自动下载一个叫"iconfont.zip"的压缩包。这个就是图标字体库。解压这个压缩包可以发现有这些文件：

1部分是指图标内容，可以忽略，但不能删除

2部分是指图标css，不能删除

3部分是使用图标的示例dome，可以删除(建议保留)

⑤使用图标：

打开dome.html,在浏览器中可以看到，相关的下载的图标，以及如何使用。这里可以我提一下，使用图标有2中方式，1是以内容的形式使用，2是以css 的形式使用：

---