How to replace default wordpress navbar link text with font awesome icons?

user_12720907 0
Viewed 338

So I'm pretty new to WP, and while I have some experience with the WP navbar, this is rather unique. I'm trying to inject font awesome icons within the nav that wp generates.

Basically, when I create the menu in wp with: <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

WP will generate for me:

<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-15">
            <a href="localhost_link/frontpage" aria-current="page">Home</a>
        </li>

        <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
            <a href="localhost_link/blog/">Listen</a>
        </li>
    </ul>
</div>

Is there a way to use ACF, or something in wp_admin or elsewhere to be able to replace the link text (specifically "home" and "listen" in above example) with 2 different font awesome icons?

Like this:

<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-15">
    <a href="localhost_link/frontpage" aria-current="page"><i class="fas fa-play-circle"></i></a>
</li>

<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
    <a href="localhost_link/blog/"><i class="fas fa-play-circle"></i></a>
</li>

As a note: I cannot (unless someone has a better way) use the fas fa-play-circle classes per link (like in the wp_admin menu editor), as that places it on the anchor, which would be fine, except I'm already using :before's on the anchor element and 2 styled :before pseudo's don't play nice together.

Also, I want the functionality (color, hover, etc) of an icon, so using css background is out as well.

Not even sure if this is possible, but I hope so! Thanks in advance!

navbar wordpress-theming wordpress css
1 Answers

You can use preg_replace. In short, we define a matching $search parameter, then we replace it with what we want.

Here we will search for >Home< and >Listen<.

<?php
/**
* do_action( 'wp_loaded' )
* This hook is fired once WP, all plugins, and the theme are fully loaded and instantiated.
* @link https://developer.wordpress.org/reference/hooks/wp_loaded/
*/
add_action( 'wp_loaded', function() {
  function wp_custom_fontawesome_nav( $subject ) {
    if( ! is_admin() ) {
      $search = [
        '/>Home</', // ... >Home< with the brackets, to be sure to target the right Home word
        '/>Listen</', // ... etc.
        // ... etc.
      ];
      $replace = [
        '><i class="fas fa-play-circle"></i><', // ... Our replacement for Home
        '><i class="fas fa-drum"></i><', // ... Our replacement for Listen
        // ... etc.
      ];
      $subject = preg_replace( $search, $replace, $subject );
      return $subject;
    };
  };
  ob_start( 'wp_custom_fontawesome_nav' );
} ); ?>

Place that in somewhere in your function.php file.

Learn more

user_36456500
Related