Font-awesome’s Handy .icon-rotate Classes

Please Note: This example was based on version 3.2.1 of the font-awesome library. I’m not sure when this occurred, but the current version of the font-aewsome library  (4.0.3) has changed all the class names for their icons. The example in this posting will work with version 3.2.1, but if you prefer to use the most recent font-awesome library, you should substitute the word ‘icon’ in class names with ‘fa’

For example, in 4.0.3, you would use…

<i class="fa-play fa-rotate-90"></i>

etc…

Image

A commonly desired feature on websites is an expanding/collapsing list, with a rotating arrow button.

I want this feature on both the gench FAQ and album review pages, and I want the currently expanded section to collapse if another section is expanded or if the currently expanded heading is clicked on again.

As with all things webby, there are a million ways to do this, but many of them rely on using a background image. Nothing wrong with that if you want some unique graphic, but it seems like a bloated way of doing it if there is a font icon that would suffice. In this case, I want a simple arrow and I know font-awesome’s “i.icon-play” is precisely what I want. One of the many extremely awesome things about the font-awesome css library is the existence of rotation classes.

I can rotate any icon in the library by adding an additional icon-rotate class.

For example, this markup would give me a “play” arrow that is rotated 90 degrees clockwise (i.e., pointing downward)…

<i class="icon-play icon-rotate-90"></i>

So I can leverage this capability by writing a jQuery script that adds or removes the rotate class depending on which section is currently expanded. Pretty cool!

/*Script for Gench FAQ page - makes answers collapsable*/
/*wrap everything in a safety  "no-conflict" function so dollar sign works*/
(function($){
/*wait until doc is ready before firing script*/
$(document).ready(function(){
    $('h3.field-content').prepend($("<i class=\"icon-play\"></i>"));
    /*click on questions to expose/hide bottom nav menu items*/
    var $answers = $('.field-name-body').hide();
    $('h3.field-content').css('cursor', 'pointer').click(function(){
    var $thisA = $(this).closest('.views-row').find('.field-name-body:first');
    $answers.filter(':visible').not($thisA).slideToggle();
    /*rotate arrows back to normal when another section is opened*/
    $answers.filter(':visible').not($thisA).closest('.views-row').find('i').removeClass('icon-rotate-90');
    $thisA.slideToggle();
    /*rotate arrow icons when section is expanded*/
    var $thisArrow = $(this).find('.icon-play');
    $thisArrow.toggleClass('icon-rotate-90');
        });
    });
})(jQuery);

If you decide to use font-awesome icons like I’m doing here, you’ve got to refer to the font-awesome library. I do this from within my theme’s template.php because I use the font-awesome shopping cart icon on every page of the site…

 /*font awesome library is needed for shopping cart icon so we need it in every header*/
function genchstyle_preprocess_html(&$variables) {
drupal_add_css(
'http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css',
array('type' => 'external')
);
}

The finished results can be seen here: http://www.gench.com/faqs

One thought on “Font-awesome’s Handy .icon-rotate Classes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s