如何在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文件中看到。

1如图所示，图标字体大小如图所示

2打开设置，进去设置页面后，找到显示与亮度选项，打开

3进入显示与亮度，找到文字大小选项，打开

4进去文字大小页面，想把图标字体调大就向右滑动，想把图标字体调小就向左滑动

5如图所示，已经调整图标字体大小了

电脑图标字体大小设置

改变电脑桌面图标大小，首先可以直接按住键盘的Ctrl键，同时滚动鼠标滚轮，可以看到图标大小变化，但字体不会改变。想要图标字体一起改变可以在桌面空白处点击鼠标右键，选择显示设置，找到更改文本、应用等项目大小，点击下拉，选择合适大小即可。

手机调整字体大小步骤

1、首先打开手机的“设置”这个系统应用，它的图案跟齿轮或者螺母会很相似。

2、然后在设置的界面中找到“显示”这个选项进行点击进入，这时就可以在界面中寻找“字体大小”这一栏。不同的手机在不同的位置，有可能在最下方，可以通过向下滑动手机来寻找。

3、有一部分的手机，“字体大小”的选项在“个性化设置”里面。所以如果找不到，可以去这“个性化设置”这项中寻找，找到之后打开“字体大小”的选项。

4、进入“字体大小”界面之后，通过滑动最下方的按钮来更改字体大小。一般向左滑动是变大，向右滑动是变小，这样字体大小就调整完成了。

华为手机的设置如下

先打开手机桌面的设置

看到显示和亮度

进去之后

找到字体与显示大小

向右拉就是变大，很大很大就不费眼睛了，其它智能手机也是大同小异，都是显示设置里面

1.首先在桌面上右键单击，找到个性化选项，点开。

2.接着来到个性化设置窗口，找到窗口颜色选项，点开。

3.在“窗口颜色”界面里，选择“高级外观设置”，点开。

4.在d出的窗口中的“项目”下选择“图标”选项。

5.再选择字体型号和大小。

6.点击确定和应用就设置完成了。设置后字体大小就能随自己的喜好改变了。

---