目录

如何将字体图标运用到网页制作中如何向字体图标文件中追加新的图标

为了使html效果更加美观，我们通常会引入字体图标来辅助我们，下面我姐介绍字体图标的使用方法

如何将字体图标运用到网页制作中

方法很简单，只需要两个步骤

下载所需要的图标将图标链入网页里

首先我们需要找到下载图标的地址

iconfont：/

icomoon：https://icomoon.io/

fontawesome：/

weather icons：http://erikflowers.github.io

lonicons：/

themify icon：https://themify.me/themify-icons

material design iconic：http://zavoloklom.github.io/material-design-iconic-font/index.htmls

我用的是第二个网站https://icomoon.io

选择好网站，就可以下载相应的图标了，

点击图中箭头所指的地方

选择图标后，可以看见selection(2)代表你选中了两个

然后点击Generate

继续点击download

然后就看开始下载图标了，将下载好的图标放在你可以找到的地方，我放在了桌面（记得不要把文件删除，否则没有效果），然后将icmoon文件放置工程下

将style.css连接至html中

然后开始使用图标，图标的使用有三种方式，

第一种，直接在icomoon文件下的demo.html中复制图标，如图

然后粘贴至html代码中

此时在设置该元素的css样式

注意这里font-family的名字要与@font-face 里font-family的名字一致

结果如下

第二种方式，是还可以使用伪元素添加转义字符的方式来应用图标

效果如下

第三种用编码的方式来展示字体图标

记得span的css中也要设置font-family为字体图标的名字

结果如图

如何向字体图标文件中追加新的图标

首先返回官网中，回到选择图标的界面

点击

选择.json文件

此时在选择几个新的图标进去，然后重新下载，把之前的。json替换掉就行了。

如果觉得《字体图标库-如何使用-icomoon》对你有帮助，请点赞、收藏，并留下你的观点哦！