使用字体图标

说明:使用字体图标

推荐网站:Icon Font & SVG Icon Sets ❍ IcoMoon

https://icomoon.io/

使用步骤:

1.选择字体图标

1)登录网站,点击所示图标:

使用字体图标_第1张图片
网站主页

2)在显示的页面中选择系统的图标或者导入自己的图标(svg格式):

选择系统的图标

使用字体图标_第2张图片
选择系统图标

导入自己的图标(SVG格式)
点击导入 icon

使用字体图标_第3张图片
导入svg文件

选择svg文件

使用字体图标_第4张图片
选择svg文件

导入之后并选择自定义图标

使用字体图标_第5张图片
自定义图标展示

2.下载文字图标

选择系统自带的图标和自定义的图标之后,点击 Generate Font

使用字体图标_第6张图片
Generate Font

点击之后在显示的页面中我们可以看到我们选择的图标和系统的图标都显示出来了,此时点击Download

使用字体图标_第7张图片
Download

下载的文件夹内容如图示:

使用字体图标_第8张图片
下载的文件夹内容

3.引用文字图标

1)将download下来的fonts文件夹放到我们的业务文件夹中。

使用字体图标_第9张图片
获取fonts文件夹

2) 将@font-face引入到代码中,告诉别人我们自己引用的字体,并把我们的字体命名为myfont。


3)给盒子使用我们的字体,并给span标签添加我们的字体样式



    

其中,span中的小方块是从demo.html中复制的,复制步骤如下:

从下载的文件夹在找到demo.html文件

使用字体图标_第10张图片
下载文件中的demo.html文件

打开demo.html,并复制对应图标中的小方块(红色箭头所指的方块),并将小方块放入span标签中:

使用字体图标_第11张图片
复制要使用的文字图标的小方块

最后打开我们的html文件:可以看到我们已经成功使用了文字图标


使用字体图标_第12张图片
使用效果图

4.追加文字图标

其实很多时候我们使用的图标不是一次就能选择完的,有时候还要往下载的fonts中追加一些问题图标,那如何追加呢?

1)导入json文件
在网站中导入我们上次下载的selection.json文件

使用字体图标_第13张图片
导入json文件

选择YES

使用字体图标_第14张图片
选择YES

2)可以看到网站中已经有我们的选择的一些文字图标了


使用字体图标_第15张图片
image.png

3)此时我们可以追加一些想要的文字图标,并下载下来,替换我们上次下载的文件夹即可,就能实现问题图标的追加。

注意
使用时,要在我们的文件夹中用新的下载的fonts文件夹,替换我们上一次下载的fonts文件夹。

你可能感兴趣的:(使用字体图标)