Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using the Font Awesome Menus plugin (http://wordpress.org/plugins/font-awesome-menus/) to show font icons next to each menu item by adding the icon name to the CSS class input.

I would really like the icons I use in the menu to also display next to items in a sub navigation. As this is a client site I would like the two to work in unison so that any icon changes the client makes in the menu is replicated in the subnav. I am currently showing my subnav using the following:

<ul class="page-subnav">
<?php wp_list_pages( array('title_li'=>'','depth'=>1,'child_of'=>get_post_top_ancestor_id()) ); ?>

I have read the following article which seems to discuss a similar topic How to style this wp_list_pages markup

My PHP is very weak but I believe that the below code holds the key to way that the plugin manages to add an icon to each menu item - any help/ideas would be gratefully received - Many thanks!

function fontawesome_menu( $nav ) {
    $menu = preg_replace_callback(
                        '/<li((?:[^>]+)(icon-[^ ]+ )(?:[^>]+))><a[^>]+>(.*)<\/a>/',
                        array( $this, 'fontawesome_replace' ),
    print $menu;
function fontawesome_replace( $a ) {
    $listitem = $a[0];
    $icon = $a[2];
    $link_text = $a[3];
    $str_noicon = str_replace( $icon, '', $listitem );
    $str = str_replace( $link_text, '<i class="' . trim( $icon ) . '"></i><span class="fontawesome-text"> ' . $link_text . '</span>', $str_noicon );
    return $str;
function fontawesome_shortcode( $atts ){
    extract( shortcode_atts( array(
        'name' => '',
    ), $atts ) );
    if( $name ){
        $clean_name=preg_replace( '/[^a-z-\s]/', '', strtolower( $name ) );
        return '<i class="' . $clean_name . '"></i>';
share|improve this question
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.