1

I've searched for a bit and I haven't found a solution to my liking: I want to avoid adding more modules to the project.

I'm very new to Drupal, so I have minimal knowledge on that matter. I have this project which somebody else has made. They created a module which adds a menu item on the Administration menu. What this module doesn't do, is add an icon to the menu item, which makes it look bare.

I want to add a custom icon I've made next to the menu item text. The reason it needs to be a custom icon and can't be fontawesome (or anything of its liking), is because it has to be a variation of the site logo.

Is there a way to accomplish this without adding more modules to the project, or is adding more modules the only way?

It's Drupal 8 with Lightning on Debian 9 with Apache2.4 and PHP7.2.

  • Is it a sub menu item? Or is it a toolbar item? Where exactly is that item located? – leymannx Jan 24 at 0:25
  • @leymannx It's a toolbar item. Located just before help. Not a sub menu item. – OH MY DEAR PUFFINS Jan 24 at 8:04
1

I figured it out. Now, this might not be the very best way to solve it, and some things should probably be changed, but this will be fine for now. Let's assume the module name is pizza.

First, create a directory called css. Inside this folder, create a css file with the name of the module. In this case it would be pizza.css. Since there needs to be an icon next to the module's menu item title on the administration menu, this is the CSS we'll need (or similar):

.toolbar-icon-pizza-main::before{
    background-image: url('../../../../../sites/default/files/pizza-icon.png');
}

Second, we will need a libraries file in the module's root (where pizza.info.yml is located); call it pizza.libraries.yml. Inside this file write something along the lines of this:

toolbar-icon:
  version: 1.0
  css:
    base:
      css/pizza.css: {}

Here, base probably should be changed to theme, since this is an aesthetic to the module.

Third, move into pizza.info.yml, we need to include the library we made into the module. Add this to the bottom:

libraries:
  - pizza/toolbar-icon

Fourth, move into pizza.module, where we're going to add this:

/*
 * Implements hook_toolbar_alter()
 */
function pizza_toolbar_alter(&$items) {
  $items['administration']['#attached']['library'][] = 'pizza/toolbar-icon';
}

This fixed it for me. Source: https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

  • I'm unsure if this should be an edit to the answer or not, but the css directory should be in the module's root as well. – OH MY DEAR PUFFINS Jan 23 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.