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

wordpress字体

Do you want to add icon fonts on your WordPress site? Recently one of our readers asked what’s the easiest way to add icon fonts in their WordPress theme?

您是否要在WordPress网站上添加图标字体？ 最近，我们的一位读者问：在WordPress主题中添加图标字体的最简单方法是什么？

Icon fonts allow you to add vector (resizable) icons without slowing down your website. They are loaded like web fonts and can be styled using CSS.

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

In this article, we will show you how to easily add icon fonts in your WordPress theme, step by step.

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

什么是图标字体，为什么要使用它们？ (What are Icon Fonts and Why You Should Use Them?)

Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily added to website content and resized using CSS. Compared to image based icons, font icons are much faster which helps with your overall WordPress website speed.

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

Icon fonts can be used to display commonly used icons. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contest, and even in WordPress navigation menus.

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

There are several free and open-source icon fonts available that has hundreds of beautiful icons.

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

In fact, each WordPress install comes with the free dashicons icon font set. These icons are used in the WordPress admin menu and other areas inside WordPress admin area.

实际上，每次WordPress安装都附带了免费的dashicons图标字体集。 这些图标用于WordPress管理菜单和WordPress管理区域内的其他区域 。

Some other popular icon fonts are:

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

Font Awesome字体很棒 Genericons泛型 IcoMoon月亮 Linearicons线性图标 Material Icons by GoogleGoogle的Material Icons The Noun Project名词项目

For the sake of this tutorial, we will be using Font Awesome. It is the most popular free and open-source icon font available. We use FontAwesome on WPBeginner website as well as our WordPress plugins like OptinMonster, WPForms, RafflePress, etc.

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

In this guide, we’re going to cover three ways of adding icon fonts in WordPress. You can choose the solution that works best for you.

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

使用插件在WordPress中添加图标字体 (Adding Icon Fonts in WordPress Using Plugins)

If you are a beginner level user just trying to add some icons to your posts or pages, then this method is suitable for you. You wouldn’t have to modify theme files, and you would be able to use icon fonts everywhere on your website.

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

First thing you need to do is install and activate the Font Awesome plugin for WordPress. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, the plugin enables Font Awesome support for your theme. You can now edit any WordPress post or page and use icon shortcode like this:

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

[icon name=”rocket”]

[图标名称=“火箭”]

You can use this shortcode along with other text or by itself in a dedicated shortcode block.

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

Once added, you can preview your post or page to see how the icon will look on a live site. Here is how it looked on our test site.

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

You can also add the font icon shortcode inside a paragraph block by itself where you can use the block settings to increase icon size.

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

As you increase the text size, this may look odd inside the text editor. That’s because the shortcode does not automatically change into an icon font inside the block editor.

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

You will need to click the preview button on your post or page to see how the actual icon size would look.

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

You can also use the icon shortcode inside columns and create feature boxes like this:

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

2.在WordPress页面生成器中使用图标字体 (2. Using Icon Fonts with a WordPress Page Builder)

Most popular WordPress page builder plugins come with built-in support for icon fonts. This allows you to easily use icon fonts in your landing pages as well as other areas on your website.

最受欢迎的WordPress页面构建器插件内置了对图标字体的支持。 这使您可以轻松地在登录页面以及网站的其他区域中使用图标字体。

Beaver Builder

海狸生成器

Beaver Builder is the best WordPress page builder plugin on the market. It allows you to easily create custom page layouts in WordPress without writing any code.

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

Beaver Builder comes with beautiful icons and ready to use modules that you can just drag and drop into your post and pages.

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

You can create icon groups, add a single icon, and move them into well-positioned rows and columns. You can also select your own colors, background, spacing, and margin without writing CSS.

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

You can even create completely custom WordPress themes without writing any code using Beaver Builder’s Themer product.

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

Elementor Pro

Elementor Pro

Elementor is another popular WordPress page builder plugin. It also comes with several elements that allow you to use icon fonts, including an Icon element.

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

You can just drag and drop an icon anywhere and use it with rows, columns, and tables to create beautiful pages.

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

Other popular page builders like Divi and Visual Composer also have full support for icon fonts.

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

3.使用代码手动在WordPress中添加图标字体 (3. Adding Icon Fonts in WordPress Manually with Code)

As we mentioned earlier that icon fonts are just fonts and can be added to your site like you would add any custom fonts.

如前所述，图标字体只是字体，可以像添加任何自定义字体一样添加到您的站点。

Some icon fonts like Font Awesome, are available from CDN servers across the web and can be linked from your WordPress theme directly.

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

You can also upload the entire font directory to a folder in your WordPress theme and then use those fonts in your stylesheet.

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

Since we are using Font Awesome for this tutorial, we will show you how you can add it using both methods.

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

Method 1:

方法1：

This manual method is quite easy.

这种手动方法非常简单。

First, you need to visit the Font Awesome website and enter your email address to get the embed code.

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

Now check your inbox for an email from Font Awesome with your embed code. Copy and paste this embed code in your WordPress theme’s header.php file just before the</head>tag.

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

Your embed code will be a single line that will fetch the Font Awesome library directly from their CDN servers. It will look something like this:

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

<script src="/123456abc.js"></script>

This method is simplest, but it can cause conflicts with other plugins.

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

A better approach would be to properly load JavaScript in WordPress using the built-in enqueueing mechanism.

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

Instead of linking to the stylesheet from your theme’s header template, you can add the following code in your theme’s functions.php file or in a site-specific plugin.

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

function wpb_load_fa() {wp_enqueue_script( 'wpb-fa', '/123456abc.js', array(), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

Method 2:

方法2：

The second method is not the easiest, but it would allow you to host the Font Awesome icon fonts on your own website.

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

First, you need to visit the Font Awesome website to download the font package to your computer.

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

Simply download the icon fonts and unzip the package.

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

Now, you will need to connect to your WordPress hosting using a FTP client and go to your WordPress theme’s directory.

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

You need to create a new folder there and name it fonts. Next, you need to upload the contents of the icon fonts folder to the fonts directory on your web hosting server.

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

Now you are ready to load icon fonts into your WordPress theme. Simply add this code to your theme’s functions.php file or in a site-specific plugin.

现在，您可以将图标字体加载到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' );

You have successfully loaded Font Awesome into your WordPress theme.

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

Now comes the part where you will be adding actual icons into your WordPress theme, posts, or pages.

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

在WordPress中手动显示图标字体 (Manually Displaying Icon Fonts in WordPress)

Go to the Font Awesome’s website to see the full list of icons available. Click on any icon you want to use, and you will be able to see the icon name.

请访问Font Awesome的网站以查看可用图标的完整列表。 单击您要使用的任何图标，您将能够看到该图标的名称。

Copy the icon name and use it like this in WordPress.

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

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

You can style this icon in your theme’s stylesheet like this:

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

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

You can also combine different icons together and style them at once. For example, lets say you want to display a list of links with icons next to them. You can wrap them under a <div> element with a specific class.

您还可以将不同的图标组合在一起并立即设置样式。 例如，假设您要在链接旁边显示带有图标的列表。 您可以将它们包装在具有特定类的<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>

Now you can style them in your theme’s stylesheet like this:

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

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

We hope this article helped you learn how to easily add icon fonts in your WordPress theme. You may also want to take a look at our tutorial on how to add image icons with navigation menus in WordPress.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: /wp-themes/how-to-easily-add-icon-fonts-in-your-wordpress-theme/

wordpress字体