如何仅使用引导图标？

Posted 2023-03-06

【中文标题】如何仅使用引导图标？

【英文标题】：how to use bootstrap icons only?

【发布时间】：2016-09-08 21:33:54

【问题描述】：

我有一个带有自己的 css 文件的项目。

现在我想使用一些图标。 Bootstrap 图标是一个不错的选择。但是，我只需要图标。我不需要其他任何东西。我去Customize Page 自定义我的下载。我只选择字形图标并保留其他文件。但是当我将它导入到我的项目中时，它带有所有 css，这使我的 UI 变得一团糟。

如果我只想使用图标怎么办？

【问题讨论】：

你为什么不使用 FontAwesome？ fontawesome.io

【参考方案1】：

正如上面建议的那样，您可以使用 font awesome 并可以访问所有 FA 图标，而无需包括引导样式，只包括

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

创建一个图标：

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

【讨论】：

Font Awesome 很棒，但是... 1. 它的可用性很差 - 这可以通过使用 SVG 图标来解决，并将它们用作具有适当 alt 和标题的前景图像。 2. 太大 - 通常需要一次下载所有图标。为防止这种情况，您可以对图标字体进行子集化。子集可以使用fontello.com 之类的服务来完成。

【参考方案2】：

因为您想使用作为 GlyphIcons 的引导图标，您可以在 Bootstrap Components page 上看到它们，并在 Official page 中查看它们的类以及除类之外的使用方法