The Icon API module integrates common icon bundles like Font Awesome, Bootstrap and more within Drupal. What if an editor wants to choose which icon is displayed in a menu? If you've added them to the menu manually via CSS then the editor won't have the ability to change the icon in the future. Once your designer has chosen a font library like Font Awesome, or made their own, what is the best way of displaying them in Drupal? The quick and simple way is to get the designer to style them using CSS but this is not flexible. It's all about choosing the right type of icons to match the design. Of course, you can't just slap them on and expect a site to look brilliant. Good use of icons on a website can really lift its overall design. * Bar formatting, not implemented, but we may want this in the future. At the very least, you'll want to include the top four in this list as they are the colors used in the toolbar bar and tray extensively: Color

You will always want to try to follow core as best practice, so it stands to reason you'll need to include some of these colors by default. So, before you decide which colors you need to produce, it's helpful to have a simple table that walks us through all the different color possibilities that comes with Drupal 8. But it’s a small price to pay for having a system that only needs to load specific images vs. All the available icons are in this folder:ĭid you notice that all the folders in the icons are hexadecimal colors? Remember, we’re not using an icon font, so changing their color in CSS is a non-starter. Lots to talk about.īefore jumping into creating an icon, let’s look at how icons are used in Drupal 8’s fancy new toolbar.

Icons - Notice all those icons? They're a new feature and that's the focus of the rest of this article.

So we no longer have page load after page load if you know where you're headed. Once vertical, you can expand and collapse whole sets of links.

Toolbar Tray expansion - When in a horizontal view, you can click the icon to the far right and make it go vertical.

Finally, Drupal has a world-class toolbar. I, for one, am very impressed with how comfortable this tray feels. Unlike Drupal 7, the top bar items tie directly to the second bar.

Toolbar Tray - This is the white bar just below the black bar that can go 'horizontal' using a toggle switch.

And the best part? The links collapse into icons on smaller screens. In a particularly brilliant stroke, we have four very simple actions. Yes it's called the 'Toolbar Bar' (note the double 'bar').

Toolbar Bar - This is the black bar across the top.

In Drupal 7, this is the toolbar you get:

So, unless you were in the issue queues helping make decisions and solve problems, you've likely not taken much time to follow the evolution of the toolbar. Note that things can definitely change between now and a stable Drupal 8. It's so pretty, it's just begging to be extended and filled with all the awesome-sauce that is Drupal Commerce.īelow is a journey through making a toolbar icon happen on Drupal 8-alpha6. The icons are resolution independent, so that means your average mobile phone and some of the higher end laptops can show off a lot more icon detail. It's functional, beautiful, and really slick. Have you installed Drupal 8 yet? That toolbar is an incredible piece of art.

Drupal icon library