Jump to content
TourKick (Clifford P)

cannot get icons to rotate

Recommended Posts

TourKick (Clifford P)    1
TourKick (Clifford P)
<i id="rotate" class="icon-search"></i>

 is an example of an icon that outputs on the page.

 

Then this CSS shows that it's applied in the Inspector, but it doesn't actually rotate.

 

i#rotate,
#rotate {
    // .rotation(-90deg); /* tried the LESS version first, after that didn't work, I tried the following, even typing directly into the browser's Inspector properties */

/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

 

FYI: I found http://stackoverflow.com/a/10601074 , which links to http://jsfiddle.net/EBXPn/ , which rotates in my browsers, but even if I try a bootstrap icon instead of a font awesome icon, (e.g. 
<i id="rotate" class="icon-leaf"></i>

 ) it doesn't work on my PageLines theme...

 
Thanks for looking into this and hopefully helping me get this working.

Share this post


Link to post
Share on other sites
Guest   
Guest

Based on that CSS-Tricks link saying it does work... I figured out a way to do it... assign a position (e.g. position:relative; .rotate(100deg); ) Yeah.

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

I think if it was that easy someone would have stumbled upon it by now.

 

Doesn't work for me in Chrome, FF, or Safari, which is expected because you just can't do transforms on pseudo elements without absolutely positioning it and even then it's not going to work cross-platform.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Guest   
Guest

You were right. Not sure what shenanigans were going on that made the think the position:relative; was the key, but I figure it out... target the :before of the pseudo class instead of the actual pseudo class. Check out the question mark icon at the bottom of this page.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×