如何在WordPress中使用Bootstrap图标?

如何在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”>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css”>
<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插件。
  • 单击“安装”按钮和“启用”按钮开始在您的站点上使用该插件。

如何在WordPress中使用Bootstrap图标?

安装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”选项。

如何在WordPress中使用Bootstrap图标?

填写片段详细信息

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

如何在WordPress中使用Bootstrap图标?

添加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>
<i class=”bi bi-whatsapp”></i>
<i class="bi bi-whatsapp"></i>

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

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

 

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

如何在WordPress中使用Bootstrap图标?

插入网页字体HTML

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

如何在WordPress中使用Bootstrap图标?

已发布文章中的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>
<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>
<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>

如何在WordPress中使用Bootstrap图标?

添加更多图标

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

如何在WordPress中使用Bootstrap图标?

社交小工具图标

使用SVG图标

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

如何在WordPress中使用Bootstrap图标?

为Bootstrap图标复制SVG HTML代码

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

<svg xmlns=“http://www.w3.org/2000/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>
<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>
<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 xmlns=“http://www.w3.org/2000/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>
<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>
<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链接应该是您主题的一部分,您不需要使用插件插入。

重要声明

本网站的文章部分内容可能来源于网络,如有侵犯你的权益请联系邮箱:wxzn8@outlook.com
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!本站资源大多存储在云盘,如发现链接失效请反馈,我们会及时更新。

给TA打赏
共{{data.count}}人
人已打赏
WordPress开发学习

如何在WordPress文章和页面上显示最近更新日期

2023-1-13 18:18:19

WordPress开发学习

如何在WordPress中添加分页符并自定义样式?

2023-1-13 18:18:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索