Web学习 图标字体使用教程

图标字体

在网页制作的过程中，我们会遇到一些下图中类似的小图标，这种图标不是图片，它能够像字体一样改变大小、颜色、粗细等等，像这种图标，实际上是图标字体

首先找到可以下载图标字体的网址，这种网址还是比较多的
我先推荐我一直用的这个网站：https://icomoon.io/

使用教程

下载

首先打开上边给出的网站：https://icomoon.io/

然后选择右上角的

进入如下界面

然后网页最上边的一栏有选择、删除、移动、编辑的功能，选择对应的功能之后，在选择网页中的图标字体可以进行对应的操作

对应的操作会在所选图标上显示对应颜色的边框

像上图中的橙色边框就是选择之后显示的边框




网页最上边的一栏还有一项Icon Library

点击之后进入图标字体库，然后可以选择自己要用的图标字体库，点击加入自己的库内

网页最下边的一栏中Selection会显示你选中的图标字体数量

点击Generate Font

跳转到下载界面，只显示你选择好的图标字体

点击Generate Font下边的Download，下载到自己的电脑上


下载之后，解压，然后会有以下几项

然后下图中选中的这几项会在后边用到，最好不要删除

fonts文件夹

将fonts文件夹复制到要使用图标字体项目的文件夹中，能方便使用，也可以直接在下一步的代码编写中将路径更改到fonts文件所在的路径

style.css文件

打开解压出来的文件的style.css，选择图片中选中的这部分代码

将选中的部分复制到自己的代码中

其中，font-family后边的内容可以任意更改

更改之后，在后面使用的时候要填写自己更改之后的内容，例如：我讲我的font-family之后的内容更改为freshman，在下面使用的时候，也输入的是freshman

demo.html文件

用浏览器打开解压出来的文件的demo.html，出现如下界面

选择要使用的图片，复制图片下边的小矩形

然后粘贴到自己的代码中，显示的像是空格一样

然后用font-family设置字体，然后就能在网页上显示了

图标字体像字体一样，可以设置大小，颜色，粗细等等

selection.json文件

如果需要选择新的图标时，还是打开https://icomoon.io/
进入图标选择界面，然后点击最上边一栏的Import Icons

选择上次解压出来的文件中的selection.json，然后上次选择的所有图标都会显示出来
，然后选择需要添加的图标，还按照之前的步骤下载

下载之后直接将上次的文件替换掉就可以了，使用步骤跟前面讲述的相同