Archived

This topic is now archived and is closed to further replies.

  • 0

cannot get icons to rotate

Question

Posted · Report post

<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

5 answers to this question

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

You can't do transforms on pseduo elements.

Share this post


Link to post
Share on other sites