Earlier this week, I was doing some work on a project that was using Twitter Bootstrap and was exclusively using Glyphicon icon set that ships with Bootstrap. The piece of functionality I was building basically involved allowing the user to rotate an image 90 degrees clockwise or counterclockwise. Looking through the Bootstrap icon set, there’s only a “rotate” icon which would work for the “clockwise” rotate but no analogous icon for a counterclockwise rotation.
I didn’t really want to use a custom icon just for this button and I really wanted to consistently use the “icon-*” class names that natively ship with Bootstrap. I’ve used CSS transforms in the past but I wasn’t sure if they’d work for “background-images”, turns out they actually do. In essence, what that means is that I’d be able to use the same “rotate” image for both the clockwise and counterclockwise icons. The CSS you’ll need to do this is:
And then to use it, you’ll just need HTML that looks like:
Of course, you’ll have to be cognizant that this is only going to work on “modern browsers” (looking at you IE), so if you’re supporting older clients you’ll need to mitigate that.