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

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

图标字体使你可以添加矢量(可调整大小)图标,而不会降低网站速度。它们像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页面生成器添加字体图标

Aini99

Yahoooooooo!

相关推荐

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

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

显示

忘记密码?

显示

显示

获取验证码

Close