如何将自定义图标添加到您的 WordPress 网站

已发表: 2022-09-19

向您的 WordPress 网站添加自定义图标是个性化您的网站并使其脱颖而出的好方法。有几种不同的方法可以将自定义图标添加到 WordPress，但最简单的方法是使用插件。您可以使用一些不同的插件将自定义图标添加到 WordPress。最受欢迎的插件之一是 Font Awesome。 Font Awesome 是一个免费插件，可让您向 WordPress 网站添加 600 多个不同的图标。另一个用于向 WordPress 添加自定义图标的流行插件称为 IcoMoon。 IcoMoon 是一个免费插件，可让您向 WordPress 网站添加超过 5,000 个不同的图标。一旦您安装并激活了这些插件之一，您就可以开始向您的 WordPress 网站添加自定义图标。为此，您需要编辑 WordPress 主题的代码。别担心，这并不像听起来那么难。只需转到外观»编辑器页面并查找“页眉”或“页脚”部分。在本节中，您将需要找到显示社交媒体图标的代码。找到此代码后，您可以将其替换为您自己的自定义代码。如果您不习惯编辑 WordPress 主题代码，您还可以使用小部件将自定义图标添加到 WordPress。为此，您需要安装并激活 Widgetkit 插件。激活插件后，您可以转到“小部件”页面并将“图标”小部件添加到侧边栏。将小部件添加到侧边栏后，您可以开始向 WordPress 站点添加自定义图标。

要添加或上传自定义图标，您可以做两件事：第一，您可以使用默认的 WordPress 图标，第二，您可以上传自定义图标。标准媒体上传器包含一项功能，允许您将图像文件作为图像图标上传。执行此方法比较困难，因为您必须首先在主题的根目录中创建一个图像目录。图标的高度和宽度应该一致；任何低于每秒 60 帧的内容都会降级。如果您安装了 27-17 子主题，您将拥有一个名为 WP-content/themes/twenty-7teen/timeline-express/image-icons 的目录结构。也可以通过将图标放置在 image-icons 目录和时间线-express-image-icons-add-on 中来保存图标 - 图像图标插件将在保存后将它们显示在公告图标浏览器中。该图标也包含在插件中，它根据图标的文件名生成一个类别，该文件名显示在过滤功能的下拉菜单中。

如果您正在创建或编辑帖子并想要使用图标字体，则可以在添加媒体按钮旁边找到图标按钮。当您单击图标按钮时，您将进入一个下拉菜单，其中包含图标字体集中的所有图标。当您在下拉菜单中选择一个图标时，它将显示在帖子编辑器中。

如何在没有插件的情况下将图标添加到 WordPress 菜单？

信用：品脱

可以通过单击管理仪表板左侧菜单栏中的外观链接来访问菜单系统。您可以通过从新屏幕中选择“在菜单项中显示 CSS 类”，然后单击右上角的“屏幕”选项，将图标添加到没有插件的 WordPress 自定义菜单中。

在您的导航菜单中添加图标将为访问者提供有关内容的一些视觉线索，并为您的网站增添一抹漂亮的风格。 WordPress 菜单通常是纯文本链接，但您可以通过向它们添加图像图标来使它们更具交互性。在这样做之前添加字体的过程需要首先对其进行配置。 WordPress 的图标使其易于使用。 Better Font Awesome 插件是最直接的使用方式。因此，不需要将每个图标复制到每个导航菜单项的“CSS 类”字段中。也可以更改图标的大小和样式。

如何在您的 WordPress 网站上安装自定义字体

要为菜单图标使用自定义字体，您需要首先在 WordPress 网站上安装自定义字体。导航到外观以配置您要自定义的菜单。只需单击“字体”选项卡上的“安装自定义字体”按钮即可安装自定义字体。您要安装的自定义字体可以在“字体名称”字段中找到，您可以单击“安装字体”链接开始安装过程。

如何将自定义字体真棒图标添加到 WordPress？

信用：堆栈溢出

有几种不同的方法可以将自定义字体真棒图标添加到 WordPress。一种方法是使用像WP Add Custom Icons这样的插件，它允许您上传自己的图标并在您的帖子和页面中使用它们。另一种方法是通过将以下代码添加到您的 functions.php 文件来手动添加图标： function my_font awesome_icons() { $icons = array( 'icon-glass' => '\f000', 'icon-music' => '\f001', 'icon-search' => '\f002', 'icon-envelope-o' => '\f003', 'icon-heart' => '\f004', 'icon-star' => '\f005', 'icon-star-o' => '\f006', 'icon-user' => '\f007', 'icon-film' => '\f008', 'icon-th-large' => '\f009', 'icon-th' => '\f010', 'icon-th-list' => '\f011', 'icon-check' => '\f012', 'icon-times' => '\f013', 'icon-search-plus' => '\f00e', 'icon-search-minus' => '\f010', 'icon-power-off' => '\f011', '图标信号' => '\f012', 'icon-cog' => '\f013', 'icon-trash-o' => '\f014', 'icon-home' => '\f015', '图标文件-o' => '\f016', 'icon-clock-o' => '\f017', 'icon-road' => '\f018', 'icon-download' => '\f019' , 'icon-arrow-circle-o-down' => '\f01a', 'icon-arrow-circle-o-up' => '\f01b', 'icon-inbox' => '\f01c', '图标-

Awesome字体是一组既现代又流行的图标。无需学习如何添加字体。借助庞大的用户社区，您可以轻松地为 WordPress 构建出色的图标。永远记得在使用图标时包含一个文本标签。由于它们，您的页面将看起来更美观。此样式表是新图标的恒定来源，并且会定期更新。要下载样式表，请转到此页面，然后使用 FTP 将其上传到您的网站。

在这一步中，您还必须将此代码复制到您的子主题的functions.php文件中（我希望这是一个子主题）。大一点的图标通常是首选。只需向您的图标类添加一个新类以扩展其大小。如果您想了解更多关于您可以进行的各种操作的信息，请转到 Font Awesome 的示例页面。如果你想在 WordPress 菜单项中包含 Font Awesome 图标，有一个很好的插件叫做 Font Awesome 4 Menus。如果您选择所有其他选项，您还可以使用相同的样式选项来增加图标的大小或更多。在此示例中，您需要将此类添加到短代码中：将图标的高度增加 3 倍。

许多 WordPress 用户都熟悉流行的网络字体 Font Awesome。自 2011 年创建以来，已有数百万个网站拥有它。Elementor 不支持原生 Font Awesome 4 支持，但它确实支持原生 Font Awesome 4 菜单。因此，如果您想在 Elementor 网站上使用 Font Awesome，您必须首先使用第三方插件。
有几个选项可供您使用。最好的选择是 Elementor Load Font Awesome 4 Support 插件，可以在 Elementor 插件商店中找到。安装并激活插件后，可以在 Elementor 设置中找到“高级”选项卡。应在此处找到“Load Font Awesome 4 Support”选项。
之后，您必须使用 Font Awesome 图标库从您希望在您的网站上使用的可用字体列表中进行选择。如果您输入您的电子邮件地址，您将能够将嵌入代码直接添加到您的主题中。
应该添加一个新字体。 Elementor 有很多可用的插件，可以更轻松地创建漂亮的网站，让创建网站变得简单。如果您不知道要使用什么插件，Elementor Load Font Awesome 4 Support 插件可能是一个不错的选择。因为 Font Awesome 站点是建立在一个简单的安装过程之上的，所以您将能够立即启动它。

字体真棒图标：免费与。临

如果您想使用默认的 Font Awesome 图标，您可以升级到专业版或安装免费版。如果您使用默认图标并尝试将 Pro 图标添加到您的网页，它们将不会出现。您可以使用其他免费图标或升级到 Pro 订阅。如果您想使用 Font Awesome 创建自定义图标，您可以使用自己的 SVG 数据。

WordPress 图标

信用：logos-world.net

WordPress 图标是代表 WordPress 平台各个方面的小图像。这些图标可用于代表一般的 WordPress，或平台的特定功能或区域。 WordPress 图标通常与其他图形元素结合使用，为用户创建一个视觉上吸引人且易于理解的界面。

符号或象形图用作图标字体，而不是字母和数字。通过使用 CSS，可以轻松地将象形图添加到网站内容中并调整其大小。当使用字体图标而不是基于图像的图标时，您会注意到 WordPress 网站的速度存在显着差异。许多免费和开源的图标字体都有数百个漂亮的图标。也可以将您的 WordPress 主题链接到来自 Web 上的 CDN 服务器的这些图标字体，例如 Font Awesome。此外，您可以将整个字体目录上传到主题文件夹，然后在样式表中使用它。您可以手动将此代码添加到主题的 functions.php 文件或特定于您网站的插件中。

您可以手动将图标字体添加到您的 WordPress 网站。可以使用 FontAwesome 插件直接在网站上找到图标。您必须单击帖子或页面上的预览按钮才能查看图标大小在屏幕上的显示方式。在以下方法中，您可以首次将图标添加到您的帖子或页面。

WordPress 使用什么图标？

Dashicons 图标字体包含在每个 WordPress 安装中。这些图标在 WordPress 管理区域和 WordPress 管理菜单中用于显示其他内容。其他字体选项包括：Font Awesome。

很酷的自定义图标

没有什么能比得上自定义图标了。它们可以使您的设备或应用程序看起来更加独特和时尚。如果您是设计师，创建自定义图标可能是一种展示您技能的有趣且具有挑战性的方式。如果您正在寻找一些很酷的自定义图标来使用，有很多地方可以找到它们。这里只是几个： 1. Flaticon：这个网站有大量的图标可供选择，包括免费的和高级的。您可以按类别浏览或搜索特定图标。 2. IconFinder：另一个查找图标的好网站。您可以按关键字搜索或浏览类别。 3. Iconfinder：这个站点类似于IconFinder，但图标选择略有不同。 4. IconDeposit：这个网站有各种各样的图标，包括免费的和高级的。 5. The Noun Project：这个网站有大量的图标可供选择，所有这些都可以免费使用。 6. DryIcons：这个网站有大量免费和高级图标可供选择。 7. IconPacks：这个网站提供了各种你可以购买的图标包。 8. GraphicRiver：这个网站有很多图标可供选择，包括免费的和高级的。 9. Creative Market：这个网站有各种各样的图标，有免费的，也有收费的。 10. Dribbble：这个站点是查找图标以及其他设计资源的好地方。

WordPress 图标字体

有多种方法可以将图标字体添加到您的 WordPress 网站。最简单的方法是使用像 Font Awesome 这样的插件，它提供了一个图标库，您可以在您的网站上使用。或者，您可以通过将字体文件上传到服务器并将 CSS 添加到主题来添加自定义图标字体。

可以使用图标字体将图标放置在 WordPress 站点中。这种字体没有字母，只有图标（由符号或象形图表示）。例如，在您网站的多个位置使用这些图标：Dashicons，图标字体，是可用于图标设计的原生 WordPress 功能。在图标字体中，您可以使用任意数量的图标，而无需增加页面的大小。矢量化图标，类似于品牌标志，可以大尺寸显示而不会出现像素化。使用图标字体有几个优点，包括它是响应式的（它在任何屏幕上都能以最佳方式显示）并且可以在所有浏览器上使用，包括旧版本。如何在我的 WordPress 上的帖子或页面中添加 Font Awesome 图标？

即使您有初学者的个人资料，也很容易将图标添加到您的 WordPress 网站。例如，您无法控制图标的大小或颜色。通过向您的简码添加属性，您可以更精确地管理它。可以将 Font Awesome 的图标添加到 WordPress 的菜单中。您还可以在为主题创建的小部件区域中包含一个图标。如果您想在边栏或页脚中包含内容，此功能可能非常有用。这篇文章的主题是二十一二十一，我选择它是为了呈现它。

页面构建器是一款应用程序，可让您为网站内容创建令人印象深刻且复杂的布局。您已经知道的 Elementor 的图标库包含在默认值中。还有一些小部件允许您添加图标（例如，按钮、图标列表、号召性用语或价格表）。顾名思义，子主题是保留主主题的所有功能和风格的子主题。要深入自定义现有主题的代码，该工具仅对这样做的人有用。如果你想使用 WPMarmite 的子主题，你可以使用它的模板之一。在任何更改之前维护您的网站（文件）和数据库的备份。

如何向 WordPress 添加字体图标？

字体必须在本节中创建的文件夹中命名。然后，您必须将图标字体文件夹内容上传到您的网络托管服务器上的字体目录。现在您可以使用带有图标字体的 WordPress 主题了。您可以在此处找到您需要添加到此主题功能的代码。

图标有字体吗？

通过将字体图标放在 aria 类中可以很容易地访问它们，但同样重要的是要记住这是一个非常简单的过程。图标可以在各种网站上找到。 Entypo、Font Awesome 和 IcoMoon 是三个最受欢迎的程序。

为什么使用字体真棒？

使用 Font Awesome 时，您已经拥有了最好看的图标。如果您还不熟悉 Font Awesome，那么现在是开始的时候了。这些图标在所有屏幕分辨率和显示器上看起来都很棒，并且它们缩短了开发过程，因为它们重量轻且更易于定制。此外，使用图标字体无需在网页上的图像中呈现图标，从而允许用户创建更高效的工作流程。
Font Awesome 是如何使用的？我们坚信，就用户友好设计和流行使用而言，它是目前最好的图标库。最后，Font Awesome 旨在内联使用（我们更喜欢在第一个实例中使用 *span，但我们更喜欢使用 *i。因此，您可以随时使用它们，而不必担心它们的大小或位置。
如果您还没有使用 Font Awesome，现在是时候开始使用它了。

如何在 WordPress 中显示字体真棒图标？

为您的 WordPress 网站使用 Font Awesome 图标就像 1-2-3 一样简单。您可以通过编辑“i class=fab fa-wordpress”在 WordPress 安装中的任何位置添加图标确保图标库是最新的，以便您知道要输入的内容。此插件中的短代码可能无法预测.

在 WordPress 中排队字体真棒

add_action('WP_enqueue_style','my_theme_style_enqueue); 功能 my_theme_style_enqueue ('awesome', get_template_directory_uri()); 并返回起始页。可以使用 /CSS/awesome.html 作为命令行；否则，。