如何在WordPress中使用Bootstrap图标?__wordpress教程

如何在WordPress中使用Bootstrap图标?__wordpress教程

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链接:


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

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

如何在WordPress中使用Bootstrap图标?__wordpress教程

安装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图标?__wordpress教程

填写片段详细信息

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

如何在WordPress中使用Bootstrap图标?__wordpress教程

添加CDN CSS链接

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

为图标插入HTML

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

使用网络字体

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

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

 

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

如何在WordPress中使用Bootstrap图标?__wordpress教程

插入网页字体HTML

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

如何在WordPress中使用Bootstrap图标?__wordpress教程

已发布文章中的Bootstrap图标

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

  
  
  

如何在WordPress中使用Bootstrap图标?__wordpress教程

添加更多图标

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

如何在WordPress中使用Bootstrap图标?__wordpress教程

社交小工具图标

使用SVG图标

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

如何在WordPress中使用Bootstrap图标?__wordpress教程

为Bootstrap图标复制SVG HTML代码

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




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



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

小结

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

内容没看懂? 不太想学习?想快速解决? 有偿解决: 联系专家

阿里云企业补贴进行中: 马上申请

腾讯云限时活动1折起,即将结束: 马上收藏

同尘科技为腾讯云授权服务中心。

购买腾讯云产品享受折上折,更有现金返利:同意关联,立享优惠

本文来自投稿,不代表新手站长_郑州云淘科技有限公司立场,如若转载,请注明出处:https://www.cnzhanzhang.com/2565.html

(0)
匿名
上一篇 2023年12月14日 下午4:53
下一篇 2023年12月14日 下午4:54

相关推荐

新手站长从“心”出发,感谢16年您始终不离不弃。