不是把每个图标都变成包裹在容器里的孤立 Icon 组件，转换器会识别块的结构，并选择一位有经验的 Elementor 用户会选择的组件。
模式 1 — 图标框
一个容器如果恰好包含一个标题、一个段落和至少一个图标，且没有其他内容元素（没有图片、按钮、列表、表格或表单），就会被转换为一个单独的图标框组件。
会带入的内容包括：图标本身、标题和描述文本、标题级别、文本对齐方式、图标大小、图标与标题之间的间距、标题下方的间隙，以及标题和描述的排版与颜色。卡片自身的框架——背景、边框、圆角、阴影、内边距——会写入组件的高级设置中，因此不会创建额外的包裹容器。
模式 2 — 图标列表
如果一个容器的子级是两个或更多重复行，每行都恰好有一个图标加文本（且没有标题、图片或按钮），就会变成一个图标列表组件，每行对应一个可编辑项目。
一个不错的细节是：如果每一行都使用相同的源图标——典型的对勾列表——则会为所有行选择一个图标，而不是根据文本为每行猜测不同图标。无法识别的对勾会回退为 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 的图标选择器中选择一个，而不是得到一个错误猜测。
为什么值得避免内联 SVG
手绘的内联 SVG 无法放入 Elementor 的图标控件中。更糟的是，一个依赖页面 CSS 来设置大小和描边的 SVG（例如 width:22px; stroke:currentColor; fill:none）一旦被移出页面，就会丢失那些 CSS——它可能会以默认大小渲染，并带有纯黑色填充。这就是典型的“我的小对勾变成了巨大的黑色形状”症状。
有两种方法可以避免：在源内容中使用 Font Awesome 类，或者让图标列表/图标框检测将 SVG 替换为真正的库图标。未匹配的内联 SVG 如果保留为 HTML，至少会按其渲染后的大小写出，因此它们不会失控变大。