如何在CSS中引入图标库并使用_通过或@font-face加载并调用图标-css教程-PHP中文网

如何在CSS中引入图标库并使用_通过或@font-face加载并调用图标

P粉602998670

发布： 2025-11-30 18:48:45

原创

586人浏览过

使用<link>引入在线图标库或@font-face加载本地图标字体文件。1. 通过<link>引入Google Material Icons或Font Awesome的CDN链接，再用i或span标签配合类名调用图标；2. 下载图标字体包后，在CSS中用@font-face声明字体，定义公共类和Unicode内容，通过类名结合伪元素调用。推荐在线方式快捷省事，本地方式适合离线与自定义需求。

如何在css中引入图标库并使用_通过<link>或@font-face加载并调用图标

在CSS中引入图标库并使用，通常有两种常见方式：通过 <link> 标签引入在线图标库，或使用 @font-face 手动加载本地图标字体文件。下面分别说明这两种方法的具体操作和调用方式。

1. 使用 <link> 引入在线图标库（推荐方式）

这是最简单快捷的方式，适用于主流图标库如 Font Awesome、Google Icons（Material Icons）等。

示例：引入 Google Material Icons

在 HTML 文件的 <head> 中添加：

立即学习“前端免费学习笔记（深入）”；

然后在 HTML 中通过类名或内联元素使用图标：

face

页面会显示“笑脸”图标。这里的 i 标签是语义化占位，你也可以用 span。

示例：引入 Font Awesome 6

同样在 <head> 中加入 CDN 链接：

使用方式：

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

查看详情

显示一个房屋图标。注意不同版本类名可能略有差异。

2. 使用 @font-face 加载本地图标字体

当你需要离线使用图标，或自定义私有图标集时，可下载图标字体包并用 @font-face 引入。

步骤一：下载图标字体包

从图标库官网（如 Font Awesome、IcoMoon）下载包含 .woff、.woff2、.ttf 等字体文件的包。

步骤二：在 CSS 中声明 @font-face

假设你将字体文件放在 fonts/ 目录下：

@font-face {
font-family: 'MyIconFont';
src: url('fonts/myicons.woff2') format('woff2'),
url('fonts/myicons.woff') format('woff');
font-display: swap;
}

步骤三：定义图标样式并使用伪元素或类

通常通过设置公共类和 Unicode 编码来调用图标：

.icon {
font-family: 'MyIconFont' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

为具体图标定义内容：

.icon-home::before {
content: "\e900";
}

HTML 中使用：