临猗网站制作：在WordPress中使用图标和矢量

2019.07.03 临猗网站建设

你访问的每一个网站都包含数百个元素，即使它不是显而易见的。这意味着图像、文本、副标题，当然还有图标。然而，使用与其他站点相同的无聊图标可以使您的网站看起来像“cookie-剪刀”，这就是为什么要寻找多功能的选项，比如在伊科蒙.

有了正确的图标设置，您可以使您的网站看起来更专业。在这篇文章中，我们将向您介绍这个流行的图标，SVG和向量工具，并且还教您如何将其元素添加到WordPress中。更重要的是，我们将向你展示如何与Divi一起使用它们。临猗网站制作

我们开始吧！

图标和矢量简介

临猗网站制作

伊科蒙是一项服务，为您提供访问成千上万的免费和优质独特的图标和矢量。在图标本身之上，Icomon还提供了一个在线应用程序，使您能够生成SVG和您想要在网站上使用的元素的字体。

在Icomon主页上，您可以找到三个不同的图标包。有Icomon本身，线图标，和利杜瓦..Icomon和Linear图标提供免费版本，每个都包含数百个元素，而lindua是一个高级专用包。

Icomon本身提供了三个不同的图标包。有免费版本，它支持SVG，PDF，EPS，AI和PSD格式，以及多个大小的PNG。先进的高级计划提供更多的图标和定制选项。然而，根据我们的经验，对于大多数用户来说，免费的Icomon层已经足够了。

但是，请记住，要使用这些图标，您需要事先将它们与WordPress集成。不过，别担心，我们会在下一节讨论这个问题。

Icomon免费层的主要特点：

临猗网站制作

有两种方法可以将Icomon元素添加到WordPress中。第一种方法涉及使用Icomonweb应用程序，它使您能够选择要使用的图标，并将其导出为SVGS：

Selecting icons in Icomoon.

为此，您可以选择上面示例中看到的图标，然后单击生成SVG及更多按钮位于页面底部：

临猗网站制作

Icomon随后将生成一个.zip文件，包括您选择的图标的SVG。您可以通过单击下一页底部的相关按钮下载该文件：临猗网站制作

Downloading icons.

现在，剩下的就是上传您想要使用的SVG文件到WordPress，并将它们作为媒体插入。如果您还没有启用WordPress中的SVG支持，请看本教程我们以前写过如何做这件事。

使用图标的第二种方法是使用插件。有几个方便的选项，使您能够导入图标包到WordPress-一个突出的选项是WP SVG图标:

临猗网站制作

这个特定的插件使您能够在激活后访问空闲包中的每个Icomon元素。一旦启用，您就可以查看WordPress仪表板上WP SVG图标选项卡中的所有Icomon图标：

临猗网站制作

选择图标将显示要在短码如上文所示。如果你仔细观察，你会发现插件提到了插入图标编辑器中的按钮。但是，这个功能还不能与块编辑器一起工作，所以现在您必须依赖于短代码。

若要将任何图标添加到页面或帖子中，请打开编辑器并添加一个短代码小部件。在其中粘贴之前复制的短代码：

临猗网站制作

差不多就是这样了！现在，当您预览页面或帖子时，Icomon图标将显示在您放置它的任何位置。问题是，块编辑器通常不能使我们将项目放置在非常精确的位置，这正是Divi出现的地方。临猗网站制作

使用Divi添加Icomon向量与不使用它的效果非常相似。换句话说，您仍然需要依赖WP SVG图标插件为您生成的短代码。要添加它们，只需使用divi码模:

临猗网站制作

一旦将更改保存到模块，就可以开始了。与Divi的主要区别在于，您可以更好地控制页面和POST布局。这意味着你可以在任何你想要的地方放置图标，而不必乱搞CSS(除非你是一个编码向导！)

在我们的经验中，使用这些图标的最佳方法是与Divi的Blurb模块一起使用。这可以让你把图标放在你的简介和补充Divi自己的集合，其中已经包括了大量的图标选项。