如何在T5_Nav_Menu_Walker中添加FontAwesome图标？

我明白你遇到的问题——这个T5导航菜单Walker默认没有处理自定义CSS类里的图标逻辑，导致你在后台加的FontAwesome类没出现在前端HTML里。别担心，咱们只需要修改Walker里的start_el方法，就能实现图标显示，具体步骤如下：

1. 先确保FontAwesome已加载（必做前提） #

如果你的网站还没加载FontAwesome，先在主题的functions.php里添加这段代码，加载最新的FontAwesome资源：

add_action( 'wp_enqueue_scripts', 'load_fontawesome' );
function load_fontawesome() {
    wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0' );
}

2. 修改T5_Nav_Menu_Walker的start_el方法 #

找到Walker代码里的start_el函数，我们要在这里加入图标处理逻辑：

步骤2.1：提取FontAwesome图标类 #

在生成菜单项HTML之前，先从菜单的CSS类里分离出FontAwesome相关的类（比如fa、fas、fa-home这类）：

// 提取FontAwesome图标类并从菜单项类中移除
$icon_classes = array();
foreach ( $classes as $key => $class ) {
    // 匹配FontAwesome的前缀类和图标类
    if ( str_starts_with( $class, 'fa-' ) || in_array( $class, array( 'fa', 'fas', 'far', 'fab', 'fal' ) ) ) {
        $icon_classes[] = $class;
        unset( $classes[$key] ); // 避免图标类重复出现在菜单项的class属性里
    }
}

步骤2.2：生成图标HTML #

根据提取到的图标类，生成对应的<i>标签：

$icon_html = '';
if ( ! empty( $icon_classes ) ) {
    $icon_html = '<i class="' . esc_attr( implode( ' ', $icon_classes ) ) . '"></i> ';
}

步骤2.3：把图标插入到菜单项文本前 #

找到原代码里输出菜单项标题的部分，把图标HTML加到标题前面：
原代码大概是这样：

$item_output .= apply_filters( 'the_title', $item->title, $item->ID );

修改成：

$item_output .= $icon_html . apply_filters( 'the_title', $item->title, $item->ID );

完整修改后的start_el关键片段参考 #

整合后的核心代码大概是这样（你可以对照原Walker代码替换对应部分）：

public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    // --- 新增：提取FontAwesome图标类 ---
    $icon_classes = array();
    foreach ( $classes as $key => $class ) {
        if ( str_starts_with( $class, 'fa-' ) || in_array( $class, array( 'fa', 'fas', 'far', 'fab', 'fal' ) ) ) {
            $icon_classes[] = $class;
            unset( $classes[$key] );
        }
    }
    $icon_html = '';
    if ( ! empty( $icon_classes ) ) {
        $icon_html = '<i class="' . esc_attr( implode( ' ', $icon_classes ) ) . '"></i> ';
    }
    // --- 图标处理结束 ---

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before;
    // --- 修改：插入图标到标题前 ---
    $item_output .= $icon_html . apply_filters( 'the_title', $item->title, $item->ID );
    $item_output .= $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

3. 后台添加图标类测试 #

现在回到WordPress后台的菜单编辑页面，给目标菜单项添加CSS类（比如fas fa-home），更新菜单后刷新前端页面，就能看到图标显示在菜单项文本前面了！

注意事项 #

• 建议把修改后的Walker代码复制到你当前主题的functions.php里，不要直接修改原Gist的代码，避免后续丢失修改。
• 如果你的PHP版本低于8.0，str_starts_with函数可能不兼容，可以替换成substr( $class, 0, 3 ) === 'fa-'来判断。

内容的提问来源于stack exchange，提问作者Orkhan Hasanli