html字体图标的使用(html字体图标怎么使用)

1.字体图标是什么?

字体图标简单的说,就是一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样。如下图:

 

html字体图标的使用(html字体图标怎么使用)

2.字体图标怎么使用?

 

1)首先可以通过两个网站进行下载字体图标:

icomoon: https://icomoon.io/

阿里图标:https://www.iconfont.cn/

 

2)进入网站进行图标的下载:

我们以icomoon网站为例,进入网站之后,选择右上角的icomoon app

 

html字体图标的使用(html字体图标怎么使用)

 

3)直接单击想要的图标:

 

html字体图标的使用(html字体图标怎么使用)

 

4)选择完成后,点击Generate Font-download

 

html字体图标的使用(html字体图标怎么使用)

 

5)对下载完成之后的文件进行解压,并将fonts文件夹放置需要使用的根目录文件夹:

 

html字体图标的使用(html字体图标怎么使用)

 

6)将下载的文件中的style.css文件打开,并将如下代码,引入到需要使用的文件中:

 

html字体图标的使用(html字体图标怎么使用)

html字体图标的使用(html字体图标怎么使用)

 

7)将图标放在一个标签中,并打开下载文件中的demo.html文件,右侧部分即为图标对应的字体,我们复制到我们的文件中,并添加相应的字体样式和大小等。

 

html字体图标的使用(html字体图标怎么使用)

html字体图标的使用(html字体图标怎么使用)

 

8)最终展示效果:

 

html字体图标的使用(html字体图标怎么使用)

 

9)如果想要更新字体图标的话,选择网站左上角的import icons

 

html字体图标的使用(html字体图标怎么使用)

 

10)选择之前下载文件中的selection.json文件

 

html字体图标的使用(html字体图标怎么使用)

 

11)直接添加想要的图标下载即可

 

html字体图标的使用(html字体图标怎么使用)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论