如何在WordPress与Elementor的Accordion标题前添加独立SVG图标

步骤1：为每个手风琴项添加自定义CSS类 #

1. 打开Elementor编辑器，找到目标Accordion组件
2. 依次点击每个Accordion Item（手风琴项）
3. 在右侧面板切换到「高级」选项卡，在「CSS类」输入框中为每个项设置唯一类名，比如accordion-item-1、accordion-item-2、accordion-item-3等

步骤2：编写自定义CSS代码 #

将以下代码添加到Elementor的「页面自定义CSS」（仅作用当前页面）或主题的「额外CSS」（全局生效）中，根据需要替换SVG代码：

/* 通用样式：统一图标与标题的间距、对齐方式 */
.elementor-accordion-title:before {
    display: inline-block;
    margin-right: 8px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* 第一个手风琴项图标 */
.accordion-item-1 .elementor-accordion-title:before {
    content: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2z"></path><polyline points="9 9 12 12 20 4"></polyline></svg>';
}

/* 第二个手风琴项图标 */
.accordion-item-2 .elementor-accordion-title:before {
    content: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>';
}

/* 第三个手风琴项图标（示例） */
.accordion-item-3 .elementor-accordion-title:before {
    content: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>';
}

注意事项 #

• 替换代码中的SVG时，需确保SVG代码无换行，且内部双引号保持正确（若出现冲突，可将SVG内的双引号替换为单引号，或用\"转义）
• 通过调整width、height、margin-right属性可以修改图标的大小和与标题的间距
• 使用currentColor可让图标颜色继承标题文字颜色，如需固定颜色，直接替换为具体色值（如stroke="#ff0000"）

内容的提问来源于stack exchange，提问作者Spexagon M.