15196028940
info@mac163.com
会员登录

如何在WordPress主题中轻松添加图标字体

图标字体使您可以添加矢量（可调整大小）图标，而不会降低网站速度。它们像Web字体一样加载，可以使用CSS设置样式。

在本文中，我们将逐步向您展示如何轻松地在WordPress主题中添加图标字体。

如何在wordpress主题中轻松添加图标字体
如何在wordpress主题中轻松添加图标字体

图标字体是什么，为什么要使用它们？

图标字体包含符号或象形图，而不是字母和数字。这些象形图可以轻松添加到网站内容中，并可以使用CSS调整大小。与基于图像的图标相比，字体图标要快得多，这有助于提高整体WordPress网站的速度。

图标字体是什么
图标字体是什么

图标字体可用于显示常用图标。例如，您可以将它们与购物车，下载按钮，功能框，赠品竞赛甚至在WordPress 导航菜单中一起使用。

有几种免费的开源图标字体，其中包含数百种精美的图标。

实际上，每个WordPress安装程序都带有免费的dashicons图标字体集。这些图标用于WordPress管理菜单以及WordPress管理区域内的其他区域。

其他一些流行的图标字体有：

  • 字体很棒
  • 泛型
  • 爱可梦
  • 线性图标
  • Google的Material Icons
  • 名词项目

在本教程中，我们将使用Font Awesome。它是最流行的免费开源图标字体。我们在WPBeginner网站上使用FontAwesome以及WordPress插件，例如OptinMonster，WPForms，RafflePress等。

在本指南中，我们将介绍在WordPress中添加图标字体的三种方法。您可以选择最适合您的解决方案。

使用插件在WordPress中添加图标字体

如果您是初学者级别的用户，而只是尝试向您的帖子或页面添加一些图标，那么此方法适合您。您无需修改​​主题文件，并且可以在网站上的所有位置使用图标字体。

您需要做的第一件事是为WordPress 安装并激活Font Awesome插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，该插件将为您的主题启用Font Awesome支持。您现在可以编辑任何WordPress帖子或页面，并使用图标短代码，如下所示：

[图标名称=“火箭”]

您可以将此简短代码与其他文本一起使用，也可以在专用的简短代码块中单独使用。

添加后，您可以预览您的帖子或页面，以查看图标在实时网站上的外观。这是我们测试站点上的外观。

您还可以单独在段落块中添加字体图标简码，在其中您可以使用块设置来增加图标大小。

随着文本大小的增加，在文本编辑器中看起来可能很奇怪。这是因为简码不会在块编辑器中自动更改为图标字体。

您将需要单击帖子或页面上的预览按钮，以查看实际图标大小。

您还可以在列内使用图标简码并创建功能框，如下所示：

2.在WordPress页面生成器中使用图标字体

最流行的WordPress的页面生成器插件来与内置的图标字体的支持。这使您可以轻松地在登录页面以及网站的其他区域中使用图标字体。

海狸生成器

Beaver Builder是市场上最好的WordPress页面构建器插件。它使您无需编写任何代码即可轻松地在WordPress中创建自定义页面布局。

Beaver Builder带有漂亮的图标，可以使用的模块可以将它们拖放到帖子和页面中。

您可以创建图标组，添加单个图标，然后将它们移动到位置适当的行和列中。您也可以选择自己的颜色，背景，间距和边距，而无需编写CSS。

您甚至可以使用Beaver Builder的Themer产品创建完全自定义的WordPress主题，而无需编写任何代码。

Elementor Pro

Elementor是另一个流行的WordPress页面构建器插件。它还带有几个允许您使用图标字体的元素，包括Icon元素。

您只需将图标拖放到任意位置，然后将其与行，列和表格一起使用即可创建漂亮的页面。

其他流行的页面构建器（例如Divi和Visual Composer）也完全支持图标字体。

3.使用代码手动在WordPress中添加图标字体

正如我们前面提到的，图标字体只是字体，可以像添加任何自定义字体一样添加到您的站点。

某些图标字体（如Font Awesome）可从网络上的CDN服务器获得，并可直接从WordPress主题进行链接。

您还可以将整个字体目录上载到WordPress主题中的文件夹中，然后在样式表中使用这些字体。

由于本教程使用的是Font Awesome，因此我们将向您展示如何使用这两种方法添加它。

方法1：

这种手动方法非常简单。

首先，您需要访问Font Awesome网站并输入您的电子邮件地址以获取嵌入代码。

现在，检查您的收件箱中是否有来自Font Awesome的电子邮件，其中包含您的嵌入代码。将此嵌入代码复制并粘贴到WordPress主题的header.php文件中，紧接在</head>标记之前。

您的嵌入代码将是一行，可以直接从其CDN服务器获取Font Awesome库。它看起来像这样：

<scriptsrc=”https://use.fontawesome.com/123456abc.js”></script>

此方法最简单，但可能导致与其他插件冲突。

更好的方法是使用内置排队机制在WordPress中正确加载JavaScript。

您可以在主题的functions.php文件或特定于站点的插件中添加以下代码，而不是从主题的标题模板链接到样式表。

functionwpb_load_fa() {
wp_enqueue_script( ‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array(), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’);

方法2：

第二种方法不是最简单的方法，但是它可以让您在自己的网站上托管Font Awesome图标字体。

首先，您需要访问Font Awesome网站以将字体包下载到您的计算机上。

只需下载图标字体并解压缩软件包即可。

现在，您将需要使用FTP客户端连接到WordPress托管，然后转到WordPress主题的目录。

您需要在此处创建一个新文件夹并将其命名为字体。接下来，您需要将图标字体文件夹的内容上载到Web托管服务器上的fonts目录。

现在，您可以将图标字体加载到WordPress主题中了。只需将此代码添加到主题的functions.php文件或特定于站点的插件中即可。

functionwpb_load_fa() {
wp_enqueue_style( ‘wpb-fa’, get_stylesheet_directory_uri() . ‘/fonts/css/font-awesome.min.css’);
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_load_fa’);

您已成功将Font Awesome加载到WordPress主题中。

现在是您将在WordPress主题，帖子或页面中添加实际图标的部分。

在WordPress中手动显示图标字体

转至字体真棒的网站看到的可用图标的完整列表。单击您要使用的任何图标，您将能够看到该图标的名称。

复制图标名称，并在WordPress中像这样使用它。

<iclass=”fa-arrow-alt-circle-up”></i>

您可以像这样在主题的样式表中为该图标设置样式：

.fa-arrow-alt-circle-up { font-size:50px; color:#FF6600; }

您也可以将不同的图标组合在一起并立即设置样式。例如，假设您要在链接旁边显示带有图标的列表。您可以将它们包装在具有特定类的<div>元素下。

<divclass=”icons-group”>  <aclass=”icons-group-item”href=”#”><iclass=”fa fa-home fa-fw”></i>Home</a>  <aclass=”icons-group-item”href=”#”><iclass=”fa fa-book fa-fw”></i>Library</a>  <aclass=”icons-group-item”href=”#”><iclass=”fa fa-pencil fa-fw”></i>Applications</a>  <aclass=”icons-group-item”href=”#”><iclass=”fa fa-cog fa-fw”></i>Settings</a></div>

现在，您可以在主题的样式表中对它们进行样式设置，如下所示：

.icons-group-item i { color: #333; font-size: 50px; } .icons-group-item i:hover { color: #FF6600}

我们希望本文能帮助您学习如何在WordPress主题中轻松添加图标字体。您可能还需要看一下我们的教程，该教程介绍了如何在WordPress中使用导航菜单添加图像图标。

相关内容

回到顶部