首页 » Wordpress教程 » 如何在WordPress主题中轻松添加图标字体

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

WPJAM TOC

图标字体使你可以添加矢量(可调整大小)图标,而不会降低网站速度。它们像Web字体一样加载,可以使用CSS设置样式。 在本文中,我们将逐步向你展示如何轻松地在WordPress主题中添加图标字体。图标字体包含符号或象形图,而不是字母和数字。这些象形图可以轻松添加到网站内容中,并可以使用CSS调整大小。与基于图像的图标相比,字体图标要快得多,这有助于提高整体WordPress网站的速度。图标字体可用于显示常用图标。例如,你可以将它们与购物车,下载按钮,功能框,甚至在导航菜单中一起使用。

有几种免费的开源图标字体,其中包含数百种精美的图标。实际上,每个WordPress安装都附带了免费的dashicons图标字体集。这些图标用于WordPress管理菜单以及WordPress管理区域内的其他区域。

其他一些流行的图标字体是:

在本教程中我们将使用Font Awesome。它是最流行的免费开放源代码图标字体。我们在WPBeginner网站上使用FontAwesome以及WordPress插件,例如OptinMonster,WPForms,RafflePress等。以下是在WordPress中添加图标字体的三种方法。你可以选择最适合你的解决方案。

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

如果你是初学者级别的用户,而只是尝试向你的帖子或页面添加一些图标,那么此方法适合你。你无需修改​​主题文件,并且可以在网站上的所有位置使用图标字体。你需要做的第一件事是安装并激活WordPress 的Font Awesome插件。激活后,该插件将为你的主题启用Font Awesome支持。你现在可以编辑任何WordPress帖子或页面,并使用图标短代码,如下所示:

[icon name=”rocket”]

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

在WordPress中添加图标字体

在WordPress中添加图标字体

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

预览添加字体后的文章

预览添加字体后的文章

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

大多数流行的WordPress页面构建器插件都内置了对图标字体的支持。这使你可以轻松地在登录页面以及网站的其他区域中使用图标字体。

Beaver Builder页面生成器

Beaver Builder是市场上最好的WordPress页面构建器插件。它使你无需编写任何代码即可轻松地在WordPress中创建自定义页面布局。Beaver Builder带有漂亮的图标,可以立即使用的模块可以拖放到帖子和页面中。

使用Beaver Builder页面生成器创建字体图标

使用Beaver Builder页面生成器创建字体图标

你可以创建图标组,添加单个图标,然后将它们移动到位置适当的行和列中。你也可以选择自己的颜色,背景,间距和边距,而无需编写CSS。你甚至可以使用Beaver Builder的Themer产品创建完全自定义的WordPress主题,而无需编写任何代码。

Elementor Pro

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

使用Elementor页面生成器添加字体图标

使用Elementor页面生成器添加字体图标

你只需将图标拖放到任意位置,然后将其与行,列和表格一起使用即可创建漂亮的页面。其他流行的页面构建器(例如Divi和Visual Composer)也完全支持图标字体。

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

正如我们前面提到的,图标字体只是字体,可以像添加任何自定义字体一样添加到你的站点。某些图标字体(例如Font Awesome)可从网络上的CDN服务器获得,并可直接从WordPress主题进行链接。你还可以将整个字体目录上载到WordPress主题中的文件夹,然后在样式表中使用这些字体。由于本教程使用的是Font Awesome,因此我们将向你展示如何使用这两种方法添加它。

你只需将图标拖放到任意位置,然后将其与行,列和表格一起使用即可创建漂亮的页面。其他流行的页面构建器(例如Divi和Visual Composer)也完全支持图标字体。

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

正如我们前面提到的,图标字体只是字体,可以像添加任何自定义字体一样添加到你的站点。某些图标字体(例如Font Awesome)可从网络上的CDN服务器获得,并可直接从WordPress主题进行链接。你还可以将整个字体目录上载到WordPress主题中的文件夹,然后在样式表中使用这些字体。由于本教程使用的是Font Awesome,因此我们将向你展示如何使用这两种方法添加它。

首先,你需要访问Font Awesome网站,以将字体包下载到计算机上。只需下载图标字体并解压缩软件包即可。现在,你将需要使用FTP客户端连接到服务器,然后转到WordPress主题的目录。你需要在此处创建一个新文件夹并将其命名为字体。接下来,你需要将图标字体文件夹的内容上载到Web服务器上的fonts目录。

将下载好的字体包上传到网站目录里

将下载好的字体包上传到网站目录里

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

function wpb_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中手动添加图标字体

转到Font Awesome的网站以查看可用图标的完整列表。单击你要使用的任何图标,你将能够看到该图标的名称。

选择自己要添加字体

选择自己要添加字体

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

<i class="fa-arrow-alt-circle-up"></i>

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

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

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

<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="icons-group-item" href="#"><i class="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
} 

本文章翻译自:How to Easily Add Icon Fonts in Your WordPress Theme

Aini99

Yahoooooooo!

相关推荐

微信扫一扫,分享到朋友圈

如何在WordPress主题中轻松添加图标字体
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close