CSS transforms can be used to adjust icon orientation. For example, you can flip a search icon to point the other way or rotate a plus icon into a delete icon on hover.
In these demos I’m transforming both a
:before pseudo element and a keyword replacement.
Inline elements can’t be transformed. Because pseudo elements and spans are inline by default I made them both
inline-block (alternatively you can use
block). If your icon is in a block element, like a paragraph, you shouldn’t need to do this.
To flip an icon over, use
To rotate an icon on a 2D plane, use
Further reading: Vertical alignment of icons.
Powered by Siteleaf