图标字体
在网页制作的过程中,我们会遇到一些下图中类似的小图标,这种图标不是图片,它能够像字体一样改变大小、颜色、粗细等等,像这种图标,实际上是图标字体
首先找到可以下载图标字体的网址,这种网址还是比较多的
我先推荐我一直用的这个网站: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,然后上次选择的所有图标都会显示出来
,然后选择需要添加的图标,还按照之前的步骤下载
下载之后直接将上次的文件替换掉就可以了,使用步骤跟前面讲述的相同