前端Iconfont两种使用方式详解：Font Class与JS模式

作者：小满时间：2026-10-31 18:23:04浏览：359

本文详细解析前端Iconfont的两种主流使用方式：Font Class与JS模式。通过创建项目、下载代码或获取JS链接，开发者可将图标引入HTML。文章提供了完整的CSS与JS引入示例，涵盖图标大小、颜色及悬停效果的自定义方法，帮助快速实现矢量图标的样式化应用。

Iconfont 是一种广泛应用的网页图标解决方案，它通过将图标转化为字体格式，使开发者能够像操作普通文字一样便捷地调用和美化图标。

步骤 1：创建项目并添加图标

1.创建项目：

登录 Iconfont 官网，点击“我的项目”。
点击“新建项目”，为项目命名并完成创建。

2.添加图标：

在 Iconfont 官网搜索目标图标。
将选中的图标加入购物车。
进入购物车界面，点击“加入项目”，并选择刚才创建的项目。

步骤 2：下载项目代码

下载代码：

在“我的项目”页面找到已创建的项目。
点击“下载代码”，建议选择“Font Class”格式（推荐）。
解压下载的文件，你将获得包含 CSS 文件和字体文件的压缩包。

步骤 3：在项目中使用 Iconfont

引入 CSS 文件：

将下载的 CSS 文件（通常名为 iconfont.css）以及字体文件（位于 font 文件夹内）放置到项目目录中。
在 HTML 文件中引入 iconfont.css 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
    <!-- 图标示例 -->
    <i class="iconfont icon-example"></i>
</body>
</html>

2.使用图标：

在 HTML 中使用 <i> 标签，并添加对应的类名以显示图标。
类名格式通常为 iconfont icon-图标名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <style>
        .icon {
            font-size: 24px; /* 设置图标大小 */
            color: #333;    /* 设置图标颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <i class="iconfont icon-example icon"></i>
    <i class="iconfont icon-user icon"></i>
    <i class="iconfont icon-settings icon"></i>
</body>
</html>

步骤 4：自定义图标样式

更改图标大小和颜色：

通过 CSS 可以灵活调整图标的大小与颜色。

.icon {
    font-size: 32px; /* 图标大小 */
    color: #ff6600;  /* 图标颜色 */
}

2.悬停效果：

可添加悬停效果以提升用户体验。

.icon:hover {
    color: #ff0000; /* 悬停时的颜色 */
}

css使用整体示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <style>
        .icon {
            font-size: 32px; /* 图标大小 */
            color: #333;    /* 图标颜色 */
            margin: 10px;
        }
        .icon:hover {
            color: #ff0000; /* 悬停时的颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <i class="iconfont icon-example icon"></i>
    <i class="iconfont icon-user icon"></i>
    <i class="iconfont icon-settings icon"></i>
</body>
</html>

下面是iconfont.js ，也就是JS的使用方式

添加图标步骤同上

步骤 1：获取 iconfont.js 链接

进入项目页面：

在“我的项目”页面，选择你创建的项目。

2.获取 iconfont.js 链接：

步骤 1：创建项目并添加图标

步骤 2：在项目中使用 iconfont.js

引入iconfont.js文件：

在 HTML 文件中引入 iconfont.js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="path/to/iconfont.js"></script>
</head>
<body>
    <!-- 图标示例 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

2.使用图标：

在 HTML 文件中使用 <svg> 标签和 <use> 标签来引用图标。
xlink:href 的值格式为 #icon-图标名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="https://at.alicdn.com/t/font_1234567_abcd1234.js"></script> <!-- 替换为你的 iconfont.js 链接 -->
    <style>
        .icon {
            width: 32px;  /* 图标宽度 */
            height: 32px; /* 图标高度 */
            fill: #333;   /* 图标颜色 */
            margin: 10px;
        }
        .icon:hover {
            fill: #ff0000; /* 悬停时的颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-user" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-settings" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

步骤 3：自定义图标样式

更改图标大小和颜色：

通过 CSS 可以轻松更改图标的大小和颜色。

.icon {
    width: 48px;  /* 图标宽度 */
    height: 48px; /* 图标高度 */
    fill: #ff6600;  /* 图标颜色 */
}

2.悬停效果：

你可以添加悬停效果来增强用户体验。

.icon:hover {
    fill: #ff0000; /* 悬停时的颜色 */
}

JS使用方式完整示例

通过上述步骤，你可以在前端项目中轻松使用 iconfont.js 图标。以下是完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="https://at.alicdn.com/t/font_1234567_abcd1234.js"></script> <!-- 替换为你的 iconfont.js 链接 -->
    <style>
        .icon {
            width: 48px;  /* 图标宽度 */
            height: 48px; /* 图标高度 */
            fill: #333;   /* 图标颜色 */
            margin: 10px;
        }
        .icon:hover {
            fill: #ff0000; /* 悬停时的颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-user" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-settings" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

总结

到此这篇关于前端iconfont两种使用方式的文章就介绍到这了,更多相关前端iconfont两种方式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS空字符串、null和undefined转数字的结果是什么

2026-11-05 14:49:16

CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比

2026-11-05 13:38:29

JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间

2026-11-05 12:55:14

JavaScript将儒略日逆向还原为公历日期时间的实现方法

2026-11-04 23:51:05

能在我的世界手机版直接修改JS代码吗

2026-11-04 19:02:53