Jump to content


Photo
- - - - -

cannot get icons to rotate


Best Answer CliffordP , 20 February 2013 - 10:10 PM

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.

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 CliffordP

CliffordP

    Advocate

  • Members


  • 470 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 19 February 2013 - 03:15 PM

Please Login or Register to see this Hidden Content

 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.

 

Please Login or Register to see this Hidden Content

 

FYI: I found

Please Login or Register to see this Hidden Content

, which links to 

Please Login or Register to see this Hidden Content

, which rotates in my browsers, but even if I try a bootstrap icon instead of a font awesome icon, (e.g. 

Please Login or Register to see this Hidden Content

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

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


#2 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 19 February 2013 - 03:31 PM

You can't do transforms on pseduo elements.



#3 CliffordP

CliffordP

    Advocate

  • Members


  • 470 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 19 February 2013 - 05:51 PM

Thanks, Nick. Didn't know that. For reference: 

Please Login or Register to see this Hidden Content



#4 CliffordP

CliffordP

    Advocate

  • Members


  • 470 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 19 February 2013 - 09:44 PM

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.



#5 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 19 February 2013 - 09:53 PM

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.



#6 CliffordP

CliffordP

    Advocate

  • Members


  • 470 posts
  • LocationOklahoma
  • Country: Country Flag

Posted 20 February 2013 - 10:10 PM   Best Answer

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

Please Login or Register to see this Hidden Content

.