Article
使用IcoMoon往HTML中插入图标
00 分钟
2020-3-9
2023-5-21
type
status
category
date
slug
summary
tags
icon
Last edited time
May 21, 2023 07:57 AM
在编写网站HTML页面,或者其他东西的时候,我们需要用到一些图标来美化显示效果 例如:
notion image

实现步骤

一、进入icomoon网站下载图标

1、选择需要的图标

notion image

2、点击Generate Font

notion image

3、点击download

notion image

4、解压iconmoon.zip

下载完成之后得到icomoon.zip文件 解压得到icomoon文件夹 内容如下
notion image

二、部署到项目中

把这里所有文件拷贝到项目目录中
notion image

三、使用范例

以我新建demo01.html为例

1、新建demo01.html

2、导入css文件

3、查看图标代码

我们选择图标后,生成网页便可以查看图标代码 点击get code
notion image
查看使用方式以及图标代码
notion image
也可以在之前解压出来,复制到项目目录style.css中查看已经导入了的图标
notion image
*在此处可以对图标样式使用css进行格式美化

4、在html中添加图标

5、显示效果

notion image

评论