BOOTSTRAP 基础教程
BOOTSTRAP 高级教程
BOOTSTRAP 示例
BOOTSTRAP 档案

Bootstrap 图标

在本教程中,您将学习如何在网页上包含和使用 Bootstrap 图标。

在 Bootstrap 5 中使用图标

Bootstrap 现在包含超过 1,300 个高质量图标,这些图标以 SVG、SVG sprite 或 Web 字体格式提供。 您可以在任何项目中使用或不使用 Bootstrap。

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

现在,让我们看看如何在网页上包含和使用 Bootstrap 图标。

在网页中包含 Bootstrap 图标

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Including Bootstrap Icons in HTML</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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, world!</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>

如何在代码中使用 Bootstrap 图标

要在您的代码中使用 Bootstrap 图标,您需要一个带有单独图标类 .bi-*<i> 标签。 使用 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>

— 上面示例的输出将如下所示:

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

注意: 记得在图标元素的结束标签后(即 </i> 标签后)留一个空格,在使用图标和内部按钮或导航链接等文本字符串时,确保有 是图标和文本之间的适当间距。


在 Bootstrap 中使用 Font Awesome 图标

您还可以在 Bootstrap 中使用外部图标库。 Bootstrap 最受欢迎和高度兼容的外部图标库之一是 Font Awesome。 它提供了超过 675 个图标,这些图标以 SVG、PNG 以及 Web 字体格式提供,以提高可用性和可扩展性。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Including Font Awesome Icons in Bootstrap</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, world!</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, user, calendar, star, globe, facebook, twitter,以此类推。 请参阅所有 Font Awesome 图标类 的列表。

例如,您可以将 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>

— 上面示例的输出将如下所示:

同样,您可以将 Font Awesome 图标放置在导航、表单、表格、段落和其他组件中,就像使用 Bootstrap 图标一样。

Advertisements