如何在Elementor中为圆形text path中心添加图标实现目标效果

安全阿岳

2026-10-5

Elementor圆形文字路径中心添加图标最佳实现方案

你要实现的参考效果如下：
参考效果示意图

推荐两种可落地的实现方式，你可以根据自己的使用习惯选择：

方式一：零代码原生组件组合法（最推荐，维护成本低）

添加一个内部Section容器，布局设置为Flex，水平对齐选「居中」，垂直对齐选「居中」，容器的position属性设为relative
往容器内先添加Text Path组件，配置好圆形路径、文字内容、字体大小、圆形半径等你需要的样式参数
同一个容器内再添加Icon组件，选择你需要的图标，调整图标尺寸到适配圆形路径的大小，此时图标会自动对齐到圆形文字的正中心
切换到响应式视图，分别调整平板、移动端下的文字半径和图标大小，保证多端显示正常

方式二：少量CSS自定义法（适合不想嵌套容器的场景）

正常添加Text Path组件，完成圆形文字路径的全部样式配置，给该组件添加自定义CSS类：circle-text-with-icon
打开当前页面的「自定义CSS」设置面板，粘贴如下代码：

.circle-text-with-icon {
    position: relative;
}
.circle-text-with-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 下方参数可根据你的需求自行调整 */
    width: 48px;
    height: 48px;
    background: url('替换为你的图标本地路径') center/contain no-repeat;
}