# Custom Menu Link - How to change the symbol **URL:** \ **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:** 13\ **Page:** 1
**Author:** ![SirSundays](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@SirSundays](https://farmos.discourse.group/u/SirSundays)\ **Post date:** [July 14, 2022, 3:34pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/1 "2022-07-14T15:34:28Z")
Hi guys, so thanks to @paul121 I managed to add my custom grafana link text field to every asset. Worked really well. I then added a custom menu link to the toolbar and routed it to a new custom side that shows your grafana. The only thing I couldn’t figure out was how to change the logo in the toolbar. Currently, it looks like this: ![grafik](https://global.discourse-cdn.com/free1/uploads/farm_os/original/1X/1a6f674405c4923c377d2e02a627d95099d65bde.png) What I tried: Adding a custom CSS library: farm\_grafana\_integration.library.yml ```auto grafana_toolbar: version: 1.x css: theme: css/toolbar.css: { } ``` Add a small CSS file that I copied from the core farmOS: ```auto /** * @file * Styling for Grafana. */ /* Grafana icon. */ .toolbar .toolbar-bar .toolbar-menu-administration .toolbar-icon-farm-grafana::before { -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='3'/%3e%3cpath fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='3'/%3e%3cpath fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3e%3c/svg%3e"); } ``` in the module file I added this hook: ```auto /** * Implements hook_preprocess_HOOK(). */ function farm_grafana_integration_preprocess_grafana_toolbar(&$variables) { $variables['#attached']['library'][] = 'farm_grafana_integration/grafana_toolbar'; } ``` Is it possible to change the logo like this? Or do I have to do it somewhat differently? Thanks in advance guys. I hope I can join the dev call again next week. ---
**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:** [July 14, 2022, 3:57pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/2 "2022-07-14T15:57:16Z")
Hi @SirSundays - it _looks_ like you did everything right, assuming that `.toolbar-icon-farm-grafana` is the correct class added to that link. I would start by confirming that the CSS file is being added to the page properly and work backwards/forwards from there to figure out why it’s not working. Maybe try with different SVG code too, just to be sure that’s correct (try copying one from core). Also: did you clear your cache? ---
**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:** [July 14, 2022, 3:58pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/3 "2022-07-14T15:58:43Z")
It seems like you already figured this out, but for reference here are the files that handle this in farmOS core itself for the icons it ships with: > > > ---
**Author:** ![paul121](https://avatars.discourse-cdn.com/v4/letter/p/54ee81/32.png) [@paul121](https://farmos.discourse.group/u/paul121)\ **Post date:** [July 14, 2022, 4:00pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/4 "2022-07-14T16:00:23Z")
I believe your preprocess hook name is slightly incorrect. Assuming your module name is `farm_grafana_integration`… `function farm_grafana_integration_preprocess_grafana_toolbar(&$variables)` should be `function farm_grafana_integration_preprocess_toolbar(&$variables)` ---
**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:** [July 14, 2022, 4:16pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/5 "2022-07-14T16:16:04Z")
Good eyes @paul121 ! ---
**Author:** ![SirSundays](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@SirSundays](https://farmos.discourse.group/u/SirSundays)\ **Post date:** [July 15, 2022, 10:41am UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/6 "2022-07-15T10:41:23Z")
To be honest, the SVG and the code is already copied the core UI theme (which worked great for adding the menu item) 😅 @paul121 I think I have already tried that but to be sure I will try what you posted. What I was wondering: What does Drupal actually search for with the preprocess function? Is it the name from the library or from where does it come? ---
**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:** [July 15, 2022, 11:44am UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/7 "2022-07-15T11:44:31Z")
That function is a Drupal “hook”. Hooks in Drupal basically work like this: at certain points in the process of building a page, Drupal says: “hey modules! do any of you have a function named `[modulename]_[hookname]()`?” And if so, it runs those functions (to alter/affect/add to whatever logic Drupal is currently working on). In the case of “preprocess” hooks, it goes a step further. During theming Drupal says: “hey modules! do any of you have a function named `[modulename]_preprocess_[themehook]()`?”, where `[themehook]` is the name of a theme hook, specifically defined by `hook_theme()` (these are used to declare to Drupal different types of elements that can be themed, with optional twig template files, etc). Preprocess functions are responsible for setting/altering the variables that get passed into the template, basically. [https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/function/hook\_preprocess\_HOOK/9.3.x](https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_preprocess_HOOK/9.3.x) ---
**Author:** ![SirSundays](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@SirSundays](https://farmos.discourse.group/u/SirSundays)\ **Post date:** [July 20, 2022, 9:14am UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/8 "2022-07-20T09:14:50Z")
I tried that and cleared the cache but it, unfortunately, did not work. I will leave the code in for now and after I release the code, maybe someone can see the mistake. I bet it’s something really small 😅 ---
**Author:** ![SirSundays](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@SirSundays](https://farmos.discourse.group/u/SirSundays)\ **Post date:** [July 20, 2022, 9:15am UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/9 "2022-07-20T09:15:07Z")
And thanks for the explanation 😃 ---
**Author:** ![RolandLocke](https://avatars.discourse-cdn.com/v4/letter/r/db5fbb/32.png) [@RolandLocke](https://farmos.discourse.group/u/RolandLocke)\ **Post date:** [April 28, 2025, 1:37am UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/10 "2025-04-28T01:37:03Z")
I’ve been attempting to alter a custom menu link icon in the Gin Toolbar. I’ve been following[a previous post’s attempt](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281) but I couldn’t get those changes to show up with a preprocess hook. However, I’ve found success using the page alter hook: ```auto **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") 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: > 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! ---
**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, 2:00pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/12 "2025-04-28T14:00:10Z")
> [@mstenta](#): > > Yea `hook_page_attachments()` or `hook_page_attachments_alter()` is another way to do it! FYI: Of these two, `hook_page_attachments()` is probably the better choice for your needs. Drupal provides “pairs” of hooks like these in a lot of cases… where the first one is for doing something, and the second is for altering things that were done by other modules. In your case, you’re not altering page attachments from another module, you just want to add your own… so `hook_page_attachments()` is the “correct” choice. Both work the same. The reason I say “correct” is because this leaves open the possibility for another module to alter YOUR module’s attachments, if it wanted to. If you use `hook_page_attachments_alter()` it makes that a little more difficult. ---
**Author:** ![RolandLocke](https://avatars.discourse-cdn.com/v4/letter/r/db5fbb/32.png) [@RolandLocke](https://farmos.discourse.group/u/RolandLocke)\ **Post date:** [April 30, 2025, 12:28pm UTC](https://farmos.discourse.group/t/custom-menu-link-how-to-change-the-symbol/1281/13 "2025-04-30T12:28:36Z")
> Hi @RolandLocke - welcome to the forum! 😃 Thanks! Happy to be here. This makes a lot of sense thanks for elaborating on the preprocess vs page\_attachments hooks. The Drupal API documentation is sparse on these topics. > Again, I tried adapting this example to the project I’m working on, but no success `farm_fd2_preprocess_toolbar(&$variables)`. I’ve adjusted the hook from` hook_page_attachments_alter()` to `hook_page_attachments()`. Thanks for the info!