|html字体图标怎么使用?分分钟学会!

|html字体图标怎么使用?分分钟学会!

文章图片

【|html字体图标怎么使用?分分钟学会!】|html字体图标怎么使用?分分钟学会!

文章图片

|html字体图标怎么使用?分分钟学会!

文章图片

|html字体图标怎么使用?分分钟学会!

文章图片

|html字体图标怎么使用?分分钟学会!

文章图片

|html字体图标怎么使用?分分钟学会!

文章图片

|html字体图标怎么使用?分分钟学会!

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


2.字体图标怎么使用?1)首先可以通过两个网站进行下载字体图标:
icomoon:
阿里图标:
2)进入网站进行图标的下载:
我们以icomoon网站为例 , 进入网站之后 , 选择右上角的icomoon app

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

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

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

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


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


8)最终展示效果:

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

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

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