# Custom Menu Link - How to change the symbol

**URL:** <https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281>\
**Category:** Development\
**Created:** [July 14, 2022, 3:34pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281 "2022-07-14T15:34:28Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![mstenta](https://yyz2.discourse-cdn.com/free1/user_avatar/farmos.discourse.group/mstenta/32/4_2.png) [@mstenta](https://farmos.discourse.group/u/mstenta)\
**Post date:** [April 28, 2025, 1:57pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/11 "2025-04-28T13:57:36Z")

</div>

Hi @RolandLocke - welcome to the forum! 😃

I merged your question into this post, to keep them together for future readers.

> [@RolandLocke](#):
>
> I’m wondering if others have used similar methods in FarmOS and if this method is not advised?

Yea `hook_page_attachments()` or `hook_page_attachments_alter()` is another way to do it!

The basic principle is the same: you want to use a Drupal hook (a specially named function) to attach your library (CSS) to all pages that have the menu, so that it gets included and styles the icon the way you want. There are various hooks that could be used for this purpose, and the “page attachments” ones work because they essentially run on _every_ page load, so you’re pretty guaranteed to get your code included everywhere you need it.

Using a preprocess hook, as described earlier, is a more “targeted” way of doing the same thing. Essentially, instead of saying “add this CSS to every page”, a preprocess hook can say “add this CSS whenever the toolbar is built.” The toolbar is ultimately what you’re trying to modify, so using `hook_preprocess_toolbar()` is probably the “best” way to do it, but both will work.

I’m not sure why @SirSundays’s hook wasn’t working, but here is another example in a community module that uses `hook_preprocess_toolbar()`, and I know for a fact that this works:

> <https://github.com/Regen-Digital/farm_regen_digital/blob/a7b26462573abcea6f63f92525bd86223d8a71d6/farm_regen_digital.module#L45-L50>

That adds this library: [farm\_regen\_digital/farm\_regen\_digital.libraries.yml at 1.x · Regen-Digital/farm\_regen\_digital · GitHub](https://github.com/Regen-Digital/farm_regen_digital/blob/1.x/farm_regen_digital.libraries.yml)

… which adds this CSS: [farm\_regen\_digital/css/toolbar.css at 1.x · Regen-Digital/farm\_regen\_digital · GitHub](https://github.com/Regen-Digital/farm_regen_digital/blob/1.x/css/toolbar.css)

Note: that CSS does two things… adjusts the logo size and spacing (because the module also replaces the default farmOS logo), and it styles the “Integrations” icon (on a related note, we are considering moving this “Integrations” menu item into core: [Integrations menu?](https://farmos.discourse.group/t/integrations-menu/2282)).

Hope that helps!

---

_[View the full topic](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281)._
