教程 > Bootstrap 4 教程 > Bootstrap 4 基础 阅读：779

Bootstrap4 如何使用字体图标

Bootstrap 现在包括 1,300 多个高质量图标，这些图标为 SVG、SVG sprite 或 Web 字体格式。

使用字体图标的好处是，可以通过应用 CSS color 属性来创建任何颜色的图标。 此外，要更改图标的大小，只需使用 CSS font-size 属性即可。

现在，让我们看看如何在网页上包含和使用 Bootstrap5 字体图标。

在网页中包含 Bootstrap5 图标

在网页中包含 Bootstrap5 图标的最简单方法是使用 CDN 链接。 此 CDN 链接基本上指向一个远程 CSS 文件，其中包含生成字体图标所需的所有类。

我们可以在 Bootstrap 模板以及简单的网页中包含 Bootstrap5 图标，而无需使用 Bootstrap 框架。 让我们看看下面的例子：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在HTML中包含Bootstrap 图标 - 迹忆客(jiyik.com)</title>
    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
    <h1><i class="bi-globe"></i> Hello, jiyik!</h1>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

尝试一下

如何在代码中使用 Bootstrap 图标

要在代码中使用 Bootstrap 图标，我们需要在代码中加一个 <i> 标记，其中应用了单独的图标类 .bi-*。 使用 Bootstrap 图标的一般语法如下：

<i class="bi-class-name"></i>

其中 class-name 是特定图标类的名称，例如 search, person, calendar, star, globe, facebook, twitter等。 查看所有 Bootstrap 图标类名的列表。

例如，要将搜索图标放在按钮内，可以执行以下操作：

<button type="submit" class="btn btn-primary"><span class="bi-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Search</button>

尝试一下

上面示例的输出如下所示：

bootstrap4 带有图标的按钮

同样，可以将图标放置在导航、表单、表格、段落或任何我们想要的地方。 在下一章中，我们将看到如何在 Bootstrap 导航组件中使用这些图标。

注意 ：记得在图标元素的结束标签后（即</i>标签后）留一个空格，当图标与文本字符串如内部按钮或导航链接一起使用时，以确保图标和文字之间有适当的间距 。

在 Bootstrap 中使用 Font Awesome 图标

我们还可以在 Bootstrap5 中使用外部图标库。 Bootstrap 最流行和高度兼容的外部图标库之一是 Font Awesome。 它提供了超过 675 个图标，这些图标为 SVG、PNG 以及 Web 字体格式，来提高可用性和可扩展性。

可以简单地使用免费提供的 font-awesome CDN 链接将其包含在我们的项目中。 让我们看看下面的示例来了解它的基本工作原理：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在Bootstrap5中包含 Font Awesome 图标 - 迹忆客(jiyik.com)</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h1><i class="fa fa-globe"></i> Hello, jiyik!</h1>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

尝试一下

如何在代码中使用 Font Awesome 图标

要在代码中使用 Font Awesome 图标，我们需要在代码中添加一个 <i> 标签以及一个基类 .fa 和一个单独的图标类 .fa-*。 使用 font-awesome 图标的一般语法是：

<i class="fa fa-class-name"></i>

其中 class-name 是特定图标类的名称，例如 search, person, calendar, star, globe, facebook, twitter等。 查看所有 Font Awesome 图标类名的列表。

例如，要将搜索图标放在按钮内，可以执行以下操作：

<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>

尝试一下

上面示例的输出如下所示：

bootstrap4 带有图标的按钮

查看笔记

扫码一下
查看教程更方便