主插件
定价

如何在 Elementor 中添加自定义图标:3 种方式

  • update 2026 年 9 月 30 日
  • 教程
如何在 Elementor 中添加自定义图标:上传 Elementor 图标选择器中显示的 SVG、Elementor Pro 自定义图标或 8 个主插件图标包

主要外卖

  • Elementor的图标库弹出窗口默认情况下仅显示字体真棒,在常规,固体和品牌集合中,并且每个带有图标字段的小部件都打开相同的弹出窗口。
  • Elementor 中添加自定义图标的最快方法是图标字段上的上传 SVG 按钮;如果文件被拒绝,请在 Elementor > 设置 > 高级下打开启用未过滤的文件上传。
  • Elementor Pro 的自定义图标屏幕从 Fontello、IcoMoon 或 Fontastic。zip 文件导入整个图标字体,并在图标库弹出窗口中的"我的库"下列出。
  • Elementor Pro 还连接 Font Awesome Pro:将您的套件 ID 粘贴到 Elementor > 设置 > 集成下,然后单击"验证套件 ID"将 Pro 样式添加到选择器。
  • Master Addons Icon Library 扩展将 8 个包含 5,344 个图标的图标包添加到同一弹出窗口中,并且该集中的 Feather Icons、Remix Icon 和 Teenyicons 需要 Master Addons Pro。

Elementor三种方式添加自定义图标:将SVG上传到任何图标字段,使用Elementor Pro导入自己的图标字体,或者从Master Addons中打开额外的图标包。这三种最终都进入了同一个图标库弹出窗口,它只提供Font Awesome,直到你向它添加一些东西。

本指南会浏览每种方法并点击确切的设置,然后在一张表中比较它们,以便您可以选择正确的。之后它涵盖了造型(颜色、尺寸和悬停)以及人们最常遇到的问题,例如显示为空方块的图标。

Elementor 中添加自定义图标的三种方法

适合的方法取决于您需要多少个图标以及您是否已经将它们作为文件。

  • 对于一两个图标(例如徽标标记),请将 SVG 直接上传到图标字段(方法 1)。
  • Elementor Pro 的自定义图标(方法 2),为自己的品牌集导入为图标字体。
  • 如需大量现成的图标,无需上传,请打开主插件中的图标包(方法 3)。

您可以在一个页面上混合所有三个。上传的 SVG、自定义图标集、字体很棒和主插件包都可以位于同一页面上,因为每个都只是同一图标字段的另一个来源。

方法1:Elementor内置图标库和SVG上传

Elementor每个带有图标字段的小部件都会打开相同的图标库弹出窗口,无论是图标,图标框,图标列表,按钮还是社交图标弹出窗口的框中列出了Font Awesome三组:常规,固体和品牌。

  1. Icon 小部件或任何带有图标的小部件添加到您的页面。
  2. 在"内容选项卡中,将悬停在图标预览上,出现两个按钮:"图标库和"上传SVG。
  3. 单击图标库可选择"字体很棒"图标,或上传 SVG 以使用您自己的文件。
Elementor Icon 小部件面板,在图标预览中带有图标库和上传 SVG 按钮
将鼠标悬停在图标预览上以到达两个按钮:图标库和上传 SVG。

Upload SVG 是添加单个自定义图标的最快方法,就像客户端的徽标标记一样。WordPress 默认阻止 SVG 上传,因此如果 Elementor 拒绝该文件,请在 Elementor > 设置 > 高级下打开启用未过滤的文件上传。只有在您信任所有可以将文件上传到站点的人的情况下才能这样做,因为 SVG 可以携带代码。

SVG都是自己的上传,没有设置以后浏览或搜索。Elementor的 图标库帮助文章 also notes, Accordion和Toggle小部件使用小的内联图标控件,而不是通常的预览,但是它们打开了相同的弹出窗口,一旦你需要超过少数的图标,接下来的两种方法可以节省时间。

需要的不仅仅是字体 太棒了? 的 元素图标库 在 Master Addons 中,将 8 包中的 5,344 个图标添加到您已经使用的选择器中,每包一个开关。

方法 2:上传包含 Elementor Pro 自定义图标的图标集

Elementor Pro可以将自己的图标字体作为单独的选项卡加载到选取器中,它接受。zip文件从导出 丰泰洛、IcoMoon或Fontastic,因此您可以根据品牌的SVG构建一套并将其保留在一个地方。

  1. 在 Fontello、IcoMoon 或 Fontastic 中构建您的集合并将其下载为。zip 文件。
  2. WordPress中,打开元素者的自定义图标屏幕,在元素者4中,元素者主屏幕上有一个快捷方式。
  3. 单击添加新图标集,放入。zip 文件,命名该集并发布。
  4. 打开编辑器中的任何图标字段。您的集合出现在图标库弹出的"我的库"下。

元素师自己的 自定义图标指南 列出每项服务的导出步骤,包括每个集合需求的唯一 CSS 前缀。此路线的捕获是维护:您首先创建或购买该集合,并且每次更改时都会再次上传。

连接字体 Aweam Pro

Elementor Pro 还连接了 Font Awesome Pro 订阅。转到 Elementor > 设置 > 集成,粘贴您的 Font Awesome Pro Kit ID 并单击验证套件 ID。然后,Pro 系列出现在标准 Font Awesome 套件旁边的选择器中。

方法 3:添加 8 个带有主插件的图标包

的 主插件图标库 extension 在图标库弹出窗口中添加了八个完整的图标包,共 5,344 个图标,没有上传任何内容:您打开一个包,其图标会出现在站点上的每个图标字段中。

包图标风格
混音图标(专业版)2,271行和填充对
谷歌材料图标1,144填充
Teenyicons(专业版)600小轮廓
元素图标(图标)第398章元素师的界面字形
图标字体(iconmonstr)300固体
羽毛图标(专业版)第272章灯线
简单的线条图标189绔 涔诲芥澶澧细线
线性170绔 涔诲芥澶澧线

设置需要三个步骤:

  1. 转到主插件 > 设置 > 扩展,单击图标库过滤器,打开您想要的包并单击保存更改。
主插件扩展选项卡过滤到图标库,并为八个图标包中的每一个都有一个开关
每个包都有自己的开关,选择器仅列出您打开的包。
  1. Elementor中打开任意图标字段,点击图标库,新包坐落在我的库下面,每个都有一个小“M”徽章。
  2. 单击一个包进行浏览,或按名称键入过滤器一次搜索每个包。选择一个图标并单击"插入"。
在 Elementor 图标库中搜索火箭会返回来自 Font Awesome、Simple Line 图标、Iconic Font、Linear Icons 和 Remix Icon 的图标
每个启用的包都运行一个搜索。这里“rocket”从其中五个返回匹配项。

Elementor 自己的图标字体(图标)不在默认的选取程序中,Master Addons 将所有 398 个图标添加为一个选项卡,当您想要与 Elementor 界面匹配的图标时,这会有所帮助。Feather Icons、Remix Icon 和 Teenyicons 随附 硕士插件专业版.

使用 Remix Icon 了解开放状态和封闭状态

大多数 Remix 图标形状都有行版本和填充版本。这使其非常适合具有两个图标状态的小部件:在 高级手风琴小部件(或 Elementor 自己的手风琴和切换), 将轮廓设置为闭合图标, 填充形状设置为打开图标。

六个 Remix 图标形状显示为行和填充对:主页、心脏、星星、书签、通知和聊天
Remix 图标线和填充对:轮廓读作闭合,填充形状读作打开。

设置详细信息、每个包的 CSS 类前缀以及常见问题的修复都在 图标库设置文档.

您应该使用哪种方法?

正确的方法取决于您已经拥有的。

如果需要的话从头开始需要什么
一两个自定义图标,就像一个标志标记上传 SVG(方法 1)SVG 文件和未过滤的上传已打开
您品牌自己的图标集自定义图标(方法 2)Elementor Pro 和 Fontello、IcoMoon 或 Fontastic。zip
字体 很棒的专业风格字体 Awesome Pro 集成(方法 2)Elementor Pro 和字体 Aweam Pro Kit ID
许多不同风格的现成图标主插件图标包(方法 3)主插件,每包一个开关
您自己的自定义小部件内的图标主插件小部件生成器小部件中的图标控件

最后一行是为那些构建自己的小部件的人准备的。 Widget 生成器中的图标控制 打开相同的弹出窗口,因此自定义小部件可以使用您打开的每个包。

如何在 Elementor 中设置图标

所有这些来源的图标都使用小部件的正常样式控件。打开样式选项卡,展开图标部分并设置原色、大小和旋转。切换到悬停选项卡,以便在访问者指向图标时更改颜色。

Icon Box 样式选项卡, 带有颜色、大小和旋转控件, 旁边是使用八种不同图标包的图标框
相同的颜色、大小和旋转控件以图标来源的包装为准。

字体图标采用您设置的任何颜色。这涵盖了字体 Awesome、自定义图标集和主插件包。上传的 SVG 只有在其路径不携带自己的固定填充时才会更改颜色,因此在上传之前从文件中删除硬编码的填充值。

其他图标小部件中也显示相同的控件。 信息框小部件 将图标与标题和文本以及我们的指南配对 elementor 中的动画按钮 显示如何将图标放置在按钮内并赋予其自己的悬停颜色。

元素图标的故障排除

大多数图标问题归结为未加载的字体文件或未保存的设置。

图标显示为空方块

Icon字体没有加载。在Elementor > 工具 > 通用 (清除文件和数据) 下清除Elementor的缓存, 然后清除您的缓存插件和CDN。如果您的字体从另一个域上的CDN加载, 请检查它是否允许对字体文件进行跨源请求。

Elementor 不会接受我的 SVG

Elementor > 设置 > 高级下开启未过滤的文件上传, 然后再试一次上传, 如果还是失败, 在文本编辑器中打开SVG, 检查它是真正的SVG文件, 而不是带有。svg扩展名的PNG。

拾取器中缺少主插件包

Master 插件 > 设置 > 扩展 > 图标库下检查包的开关是否已打开,并且您单击保存更改,然后重新加载编辑器。Feather 图标、Remix 图标和 Teenyicons 还需要具有活动许可证的 Master Addons Pro。

图标字体会减慢页面的速度

每个图标字体都是一个可供浏览器下载的文件。坚持一两个包以获得一致的外观,并阅读我们的指南 加快 Elementor 网站速度的,它涵盖了 Elementor 的内联字体图标选项,用于将图标呈现为 SVG 而不是字体文件。

常见问题

如何在 Elementor 中添加图标?

Icon 小部件, 或任何带有图标字段的小部件, 然后在"内容"选项卡中的图标预览上悬停, 然后单击"图标库 "。从"字体棒"或您添加的任何图标集中选择一个图标, 然后单击"插入"。要使用自己的文件, 请单击"上传 SVG"。

我可以在 Elementor 中使用 SVG 图标吗?

是在任意图标字段上单击上传SVG按钮,然后选择您的文件,WordPress默认阻止SVG上传,因此如果Elementor拒绝它,请在Elementor>设置>高级下打开启用未过滤的文件上传,然后再试一次。

我需要 Elementor Pro 来添加自定义图标吗?

不适用于单个 SVG 上传或主插件图标包。通过 Custom Icons 从 Fontello、IcoMoon 或 Fontastic。zip 导入整个图标字体,并连接 Font Awesome Pro 是 Elementor Pro 的功能。

Elementor 中如何更改悬停图标的颜色?

选择小部件,打开"样式"选项卡并展开图标部分。从"普通"切换到"悬停",并在那里设置悬停颜色。字体图标会立即获取颜色;上传的 SVG 仅在其路径没有固定填充的情况下才更改颜色。

在哪里可以找到图标的 CSS 类?

Elementor 将字体图标输出为 an <i> tag 上的集合的类名,你可以通过浏览器的检查工具看到这些,对于 Master Addons 包,每个前缀都列在 图标库文档例如 jltma-ri- 为混音图标。

最后的想法

Elementor中添加自定义图标会下降到图标开始的位置,单个SVG直接进入图标字段,一个品牌图标字体通过Elementor Pro的自定义图标进入,在Font Awesome Pro旁边,如果你有一个套件,如果你宁愿挑选而不是上传,八个Master Addons包在同一个弹出窗口中多放了5,344个图标。

要在打开任何内容之前查看每个包含样本和图标的包,请浏览 元素图标库 页。

罗伊·杰米的照片
罗伊·杰米
I’m Roy Jemee,Pixar Labs 的内容牧马人和营销人员,为 Elementor 编写主插件,我编写教程,录制视频,并保持文档的最新状态,所以你总是知道如何使用每个功能,我还处理支持,所以如果你遇到障碍,我就是帮助你修复它的人真正的答案,来自每天使用这些工具的人。