Architectural Blog, Modern Buildings & Casino Designs Loading...

Nicen up Drupal’s tabs with the Icon Tabs module

{ Posted 25th April 2014 }

Have you ever had that problem where you look at the local tasks menu (a.k.a tabs) of your Drupal website for the 30th time in a day and think:

Ugh! I spend so much time looking at these ugly little tabs, someone should bloody well make them look nicer! Add some icons at least. This is a gigantic problem for me!

I know I have.

Well let me take the opportunity to, firstly, show off that I have taken the time to define a style on my website for blockquotes, and secondly, let you know that a solution exists!

Icon Tabs is a little module I built for this exact reason.

I remember getting very excited by icon fonts and all the possibilities they brought along, particularly the IcoMoon website and its app for generating fonts containing your own selection of icons – its all so easy!

Well, in a fit of enthusiasm for icon fonts I started manually adding the icons and some general styling, CSS3 transitions and so on, to the tabs on my Drupal projects. I liked it so much that I ended up creating this module to do that all automatically!

Out of the box the module moves the tabs into a block and adds some default icons to them using icon fonts. There are plenty of extra options though!

On the configuration page you can enable the basic theming I add to them called Fred Tabs (the original, less googleable module name). The Fred Tabs theme provides some nice style and also gives you to option to stack the tabs vertically on larger screen widths. On top of that you can chose which icons you want for each tab out of a selection of 450(!!) icons!