Template preprocess to generate Font Awesome markup for menu links

Question

In Drupal 9, I need the ability to prepend Font Awesome icons to menu links.

I have attached Font Awesome 5 JS and CSS assets to my theme via *.libraries.yml.

If I open a menu link in the DOM inspector and edit the markup of a link from this:

<ul class="clearfix nav">
  <li class="nav-item">
    <a href="#comments" class="nav-link nav-link-comments">Comments</a>
  </li>
</ul>

to this:

<ul class="clearfix nav">
  <li class="nav-item">
    <i class="fas fa-comment"></i><a href="#comments" class="nav-link nav-link-comments">Comments</a>
  </li>
</ul>

The Font Awesome JavaScript detects the empty <i class="fas fa-comment"></i> element, and the result looks exactly like what I want it to look like.

However, it's been very tricky to add that markup to the link element programmatically.

I can do it with JavaScript DOM manipulation in a Drupal behavior, but I'd prefer to prepare the markup in Twig and preprocess.

After trying and rejecting a couple of other modules, I am now looking at menu_link_attributes.

It's very easy to add the class .fa-comment to this menu link:

<ul class="clearfix nav">
  <li class="nav-item">
    <a href="#comments" class="fa-comment nav-link nav-link-comments">Comments</a>
  </li>
</ul>

I'm looking at an old forum thread which explains a template preprocess approach to matching classes starting with fa-, and using that value to generate <i> tags with the needed classes. This approach may have worked with Drupal 7.

The THEME_menu_link() preprocess function does not seem to work in D8 and D9, so I am trying to rewrite it using THEME_preprocess_links(). But when I drop a dump($variables); in this function, I do not see all the menu links.

While I'm looking for a different template preprocess function, I thought I'd describe the issue here, in case it's something you've encountered before.

NOTE: This question is technically a duplicate, but the old one never got answered so I think I'm safe to ask it again.

Answer 1

I went with this expedient solution:

https://github.com/gnikolovski/link_alter

The developer has a blog post about his approach:

http://dev.studiopresent.com/blog/back-end/altering-menu-links

The crux of it (because link-only answers are discouraged) can be boiled down to this:

In Drupal 8 you can use the hook_link_alter(&$variables) hook to alter menu links. [...]But, there is no easy way to identify this menu link. You cannot tell which menu contains this link, so unless you want to alter all links on your site, using this hook to precisely target menu links is a bad idea.

Unless, you somehow add an identifier.

Fortunately, you can easily do just that and make all this more dynamic. You can use form_alter() hook to alter menu link edit form, and add something like this:

Thanks to @sonfd for the tip in the comment, which might be even better:

https://www.drupal.org/project/fontawesome_menu_icons

Since I already solved my problem and I'm on a deadline, I might not check that module out right away. But it is good to know that it exists!