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 – […]



