Modifying First Letter of menu-item through Regex WordPress not working

Question

I am attempting to style the first letter of every menu item in WordPress wp_nav_menu. I am using regular expressions and JavaScript to achieve this but for some reason, it is not applying the span tags within the anchor tags. I have included the script in the footer before the closing body and am using a windows.onload function but no luck. Any help on this would be appreciated. Thank you. Here is the following code.

footer script:

<script>
            window.onload = function(){
                var elements = document.querySelectorAll('a.each-word')
                for (var i=0; i<elements.length; i++){
                    elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
                }
            }
        </script>

menu script in PHP inside functions.php:

// HTML5 Blank navigation
function html5blank_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu-wrapper',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '<i class="fas fa-minus"></i>',
        'link_after'      => '',
        'items_wrap'      => '<ul>%3$s</ul>',
        'depth'           => 1,
        'walker'          => ''
        )
    );
}

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $atts, $item, $args ) {
    $class = 'each-word'; // or something based on $item
    $atts['class'] = $class;
    return $atts;
}

Style.css

.fas.fa-minus {
    color: #704179!important;
    font-size: 12px!important;
  }

  .first-letter span {
    color: #704179!important;
    font-size: 26px!important;
    font-weight: bold!important;
  }

Header Nav seciton:

<!-- nav -->
    <nav class="nav" role="navigation">
        <?php html5blank_nav(); ?>
    </nav>
<!-- /nav -->

EDIT: After modifying the regex in my code to /\b([a-z])([a-z]+)?\b/gim my menu now displays like this:

What I am shooting for is - HOW TO START

EDIT: To get it to Work - Changed CSS to the following:

.fontawesome::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

.fontawesome::before {
  font-family: "Font Awesome 5 Free";
  content: "\f068"!important;
  color: #704179!important;
  font-size: 12px!important;
}  

  .fas.fa-minus {
    color: #704179!important;
    font-size: 12px!important;
  }

 a span.first-letter  {
    color: #704179!important;
    font-size: 26px!important;
    font-weight: bold!important;
  }

I also changed my functions.php to the following:

function html5blank_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu-wrapper',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul>%3$s</ul>',
        'depth'           => 1,
        'walker'          => ''
        )
    );
}

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $atts, $item, $args ) {
    $class = 'each-word fontawesome'; // or something based on $item
    $atts['class'] = $class;
    return $atts;
}

Finally, my script is this:

<script>
            window.onload = function(){
                var elements = document.querySelectorAll('a.each-word')
                for (var i=0; i<elements.length; i++){
                    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2")
                }
            }
        </script>