转换器不会把每个图标都变成一个孤零零、外面套着容器的图标小部件，而是识别出区块的结构，选出一位有经验的 Elementor 用户会选的那个小部件。
模式 1——图标框
一个容器如果恰好包含一个标题、一个段落和至少一个图标，且没有其他内容元素（没有图片、按钮、列表、表格或表单），就会被转换成单个图标框（Icon Box）小部件。
会被带过来的有：图标本身、标题和描述文字、标题层级、文本对齐方式、图标大小、图标与标题之间的间距、标题下方的间距，以及标题和描述各自的字体排版与颜色。卡片自身的外框——背景、边框、圆角、阴影、内边距——会写进小部件的“高级”设置，因此不会额外生成一个包裹容器。
模式 2——图标列表
如果一个容器的子元素是两行或更多重复的行，每行恰好是一个图标加一段文字（且没有标题、图片或按钮），它就会变成一个图标列表（Icon List）小部件，每一行对应一个可编辑的列表项。
有个贴心的细节：如果每一行用的都是同一个源图标——典型的对勾列表——所有行会统一使用同一个图标，而不是根据每行的文字分别猜一个不同的图标。识别不出来的对勾会回退为 fa-check。行间距、图标大小、图标颜色、文字颜色和文字排版都会一并转移。
模式 3——普通图标
其余单纯是图标的内容会变成图标小部件，大小和颜色取自源页面。
让图标进入 Elementor 图标库
把图标选项设为匹配 Elementor 图标库。之后：
- 如果你的标记已经使用了 Font Awesome 类名（
<i class="fas fa-shield-alt">），就会使用完全相同的那个图标。 - 如果是一个没有名称的内联
<svg>，转换器会按含义去匹配——依据图标的 class、aria-label、title 以及卡片的标题文字——对照一张关键词表（shield → shield，recycle/reusable → recycle，water/clean → tint，等等）。 - 如果什么都匹配不上，图标控件会刻意留空，让你从 Elementor 的图标选择器里自己挑一个，而不是给你一个猜错的结果。
为什么你以为会变成图标框的卡片没有变
大多数人正是带着这个问题找到这篇文章的，而答案几乎总是同一个：卡片里有一个链接。
图标框的判定会排除包含以下任意一项的容器——链接、按钮、图片、列表、表格、表单、输入框、下拉选择框、多行文本框、视频或 iframe。一张底部带“了解更多”链接的功能卡片，在第一条就被排除了，于是会转换成一个装着若干独立小部件的容器。
这是有意为之，而不是疏忽。Elementor 的图标框小部件只容纳一个图标、一个标题和一段描述——仅此而已。把一张还带着链接的卡片压平，就意味着要么丢掉这个链接，要么把它硬塞到不该放的地方。两者都不可接受，所以工具选择不压平，给你一个忠实于原样的版本。
如果你想要整洁的图标框输出，就得从源码入手：从外面包一层，让整张卡片都可点击；或者去掉内部的链接，之后再添加一个 Elementor 按钮。如果你更想保留链接，容器版本也完全没问题——只是多一层而已。
同样的原则，在图片框上体现得更清楚
图片框（Image Box）模式——一张图片、一个标题、最多一个段落——带有一道值得一说的防护，因为它体现了整个转换器赖以构建的原则。
在压平之前，它会把卡片的全部文字与“标题文字 + 段落文字”进行比较。只要还有剩余的文字，这张卡片就不会被转换成图片框。
这条规则拦住的典型情况是带编号的步骤卡片：一个大大的“1”、一个标题和一段描述。它看起来完全像是图片框的候选，但图片框小部件根本没有地方放那个“1”——一旦压平，这个数字就会悄无声息地消失。比较时发现了多余的文字，卡片于是保留为容器，每一部分内容都得以保住。
悄无声息地丢失内容，是转换工具最糟糕的失败，因为你要很久以后、往往是当着别人的面才发现。结构树深一点，用来换取永远不发生这种事，代价很小。
为什么最好避免内联 SVG
手绘的内联 SVG 无法放进 Elementor 的图标控件。更糟的是，如果一个 SVG 依赖页面 CSS 来设定大小和描边（例如 width:22px; stroke:currentColor; fill:none），一旦被从页面中拿出来，这些 CSS 就没了——它可能会以默认尺寸、实心黑色填充的样子渲染出来。这就是典型的“我的小对勾变成了巨大的黑色图形”症状。
有两种办法可以避免：在源码里使用 Font Awesome 类名，或者让图标列表/图标框识别把 SVG 换成真正的图标库图标。没有匹配上、仍保留为 HTML 的内联 SVG，至少会按渲染后的尺寸写出，不会突然变得巨大。