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

2019.07.03 临猗网站建设

71

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

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

我们开始吧!


图标和矢量简介

临猗网站制作

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

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

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

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

Icomon免费层的主要特点:

  • 接近500个图标。
  • 你可以导出几种格式的图标,包括SVG,TTF,PDF,EPS,AI和PSD。
  • 可提供多种尺寸的PNG。

临猗网站制作

如何将图标和矢量添加到WordPress中

有两种方法可以将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出现的地方。临猗网站制作

Icomon图标和矢量与Divi的集成

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

临猗网站制作

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

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

结语


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP