如何修改Divi主题的移动端菜单图标？

方法一：用Divi内置自定义选项（最简单） #

• 登录WordPress后台，打开Divi > 主题自定义
• 在自定义面板里找到标题与导航 > 移动导航
• 找到移动菜单图标选项，直接选择Divi自带的样式（汉堡、叉形、箭头等），选完保存设置就生效。

方法二：自定义CSS替换成专属图标 #

如果自带图标不够用，用CSS替换成Font Awesome图标或者自定义图片都可以：

替换为Font Awesome图标 #

先隐藏默认图标，再添加自定义图标：

/* 隐藏默认移动端菜单图标 */
.et_mobile_menu_icon:before {
    display: none;
}
/* 添加Font Awesome图标 */
.et_mobile_menu_icon {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* 对应Font Awesome的实心图标权重 */
}
.et_mobile_menu_icon:after {
    content: "\f0c9"; /* 替换成你需要的Font Awesome图标代码，比如"\f00d"是叉号 */
    font-size: 24px; /* 按需调整图标大小 */
    color: #333; /* 按需调整图标颜色 */
}

提示：如果你的网站没加载Font Awesome，得先在主题里引入它的资源，比如通过子主题functions.php添加加载代码。

替换为自定义图片图标 #

/* 隐藏默认图标 */
.et_mobile_menu_icon:before {
    display: none;
}
/* 设置自定义图片作为图标 */
.et_mobile_menu_icon {
    width: 30px;
    height: 30px;
    background-image: url('你的图片文件URL');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

CSS添加位置：直接在Divi自定义izer的通用设置 > 自定义CSS里粘贴，或者放到子主题的style.css文件中。

方法三：子主题PHP代码深度自定义 #

如果需要更灵活的控制，比如动态切换图标，可以用子主题的PHP代码修改：

• 先创建并激活Divi子主题（防止主题更新丢失修改）
• 打开子主题的functions.php文件，添加以下代码：

add_filter('et_mobile_nav_menu_icon', 'custom_divi_mobile_menu_icon');
function custom_divi_mobile_menu_icon() {
    // 返回自定义的图标HTML，这里示例用Font Awesome汉堡图标
    return '<span class="et_mobile_menu_icon"><i class="fas fa-bars"></i></span>';
}

注意：同样要确保Font Awesome资源已加载，否则图标无法显示。

内容的提问来源于stack exchange，提问作者Zohaib Haroon