css字体图标的实现

css字体图标的实现

1.

进入https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

下载对应字体图标的SVG文件

2.

进入创建字体图标的网站 https://icomoon.io
第一步：点击IcoMoon app 进入创建字体图标界面
第二步： 点击 import icons导入下载的SVG文件 ，然后在untitled set中选中导入的svg文件
最后点击generate font创建字体图标

3.

下载生成的字体图标压缩包

4.

打开字体图标压缩包中的 demo.html 文件可以看到对应字体图标的实例，下图红框内代表字体图标对应的类名

5.

在代码中使用字体图标，只需要把字体图标压缩包中的 fonts文件夹和 style.css 文件放到同一目录下然后在代码中连接 style.css 文件在标签中使用相应类即可

6. 效果展示

可以通过改变style.css 文件中对应类的 color 和font-size 来改变字体图标的颜色和大小