如何在WordPress中使用Bootstrap图标？

Bootstrap是最流行的前端框架之一，最初由Twitter开发。该框架的主要目标是使用可重用组件创建对移动设备友好的网站。

最初Bootstrap提供Glyphicons，然后使用Font Awesome，现在提供他们自己的一组图标，称为Bootstrap Icons。您可以在任何网站上使用引导图标，包括WordPress网站。好的部分是您不需要使用基本框架CSS和JS来使用图标。

在本文中，我们将解释如何在WordPress网站中使用Bootstrap图标。

Bootstrap图标

直到几年前，Font Awesome非常受欢迎，几乎每个开发人员和网站所有者都在使用它们。这最初是为与Bootstrap一起使用而开发的，它基本上被免费的Bootstrap图标集所取代。您可以在任何项目中以两种方式使用Bootstrap图标 – SVG和Web字体。如果SVG无法在您的WordPress网站上运行，您可以使用网络字体选项。

在WordPress中使用图标涉及两个步骤：

• 在标题中链接图标CSS
• 在内容中嵌入HTML

在WordPress中链接Bootstrap图标CSS

虽然您可以在服务器上下载和托管图标，但最简单的方法是使用他们的CDN链接。这是Bootstrap Icons的最新CDN链接：

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

您需要将此链接插入WordPress网站的header部分。有许多免费插件可用于在标题中插入CSS链接。但是，此插件不提供任何仅在少数页面上插入链接的控制。默认情况下，它将在整个站点的标题中加载CSS文件。当您只想在少数文章或页面上使用图标时，这可能不是必需的。在这种情况下，您可以使用我们将在本文中使用的Header Footer Code Manager插件。

• 登录到您的WordPress管理面板，然后转到“插件 > 安装插件”部分。
• 搜索“header code”以找到Header Footer Code Manager插件。
• 单击“安装”按钮和“启用”按钮开始在您的站点上使用该插件。

安装Header Footer Code Manager插件

激活插件后，它将在侧边栏中添加一个名为HFCM的新菜单项。将鼠标悬停在HFCM菜单上并选择“Add New”选项。您将看到两个部分 – 一个用于控制代码段，然后是用于粘贴实际代码的框。在第一部分填写以下详细信息：

• Snippet Name – 为您的片段输入名称，例如Bootstrap图标。
• Snippet Type – 从下拉列表中选择CSS。
• Site Display – 在此处选择“站点范围”选项以在整个站点中插入 CSS。否则，请从可用选项之一中进行选择，例如特定文章、页面、类别、标签、主页等。您将看到基于您的选择的其他选项。例如，选择特定文章将显示用于选择文章的“文章列表”下拉菜单。您可以选择要在其中显示图标的单个或多个文章。如果您想在站点范围内使用，则可以通过从排除列表中选择它们来排除在某些文章和页面上加载 CSS。
• Location – 选择标题选项。
• Device Display——选择“Show on ALL Devices”选项。如果需要，您可以仅在桌面或移动设备上进行选择。
• Status – 选择“Active”选项。

填写片段详细信息

填写完所有详细信息后，将CDN链接粘贴到“Sinppet/Code”部分。

添加CDN CSS链接

单击“Save”按钮以应用您的更改。

为图标插入HTML

现在您已经在标题部分插入了CSS，下一步是为您的图标嵌入HTML。与Font Awesome图标类似，每个Bootstrap图标也有一个代码点和相应的CSS类名称。您可以参考图标页面以获取所有您喜欢的图标的CSS类名称的完整列表。您需要做的就是使用自定义HTML区块嵌入具有正确CSS类名称的HTML代码。您可以使用SVG或Web字体，因为CDN中的链接CSS允许这两种选择。

使用网络字体

这是最简单的选项，因为您只需要知道图标的CSS类名称。例如，下面是插入WhatsApp图标字体的格式。

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

您可以通过添加内联CSS来更改大小和颜色，如下所示：

<i class="bi bi-whatsapp" style="font-size: 5rem; color: blue;"></i>

您可以简单地将这段代码粘贴到自定义HTML区块中。

插入网页字体HTML

发布您的文章，当查看已发布的文章时，图标将如下所示。

已发布文章中的Bootstrap图标

您可以在同一自定义HTML区块内添加其他图标，以将完整的社交图标列表显示为小工具。如果您想为您的图标添加超链接，只需使用HTML锚标记包装图标即可。你也可以使用   在图标之间添加空间。下面是带有Facebook、Twitter、YouTube图标的社交小工具的代码。

<a href="https://www.facebook.com/"> <i></i> </a>
<a href="https://twitter.com/"> <i></i> </a>
<a href="https://www.yourtube.com/"> <i></i> </a>

添加更多图标

它在已发布的文章上如下所示。

社交小工具图标

使用SVG图标

为了使用SVG格式，您需要获取图标和CSS类的SVG。您可以通过单击Bootstrap图标页面中的图标并复制“Copy HTML”部分下的代码来获取此信息，如下所示。

为Bootstrap图标复制SVG HTML代码

SVG将采用以下格式，默认情况下，图标大小通过宽度/高度属性控制。

<svg  fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>

您可以使用CSS颜色属性更改大小并添加自定义颜色，如下所示。

<svg  fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>

现在您可以将此代码嵌入到您的WordPress网站的自定义HTML中。您可以单击预览以查看图标，也可以发布文章以在实时页面中查看图标。

小结

由于Bootstrap图标是开源的并且免费提供，因此您可以利用它们来美化您的WordPress内容。我们建议使用Web字体选项，它只需要图标的CSS类名称。但是，如果您觉得舒服，您可以使用SVG。请注意，如果您已经在使用基于Bootstrap的WordPress主题，则图标的CSS链接应该是您主题的一部分，您不需要使用插件插入。