Icon font Rotate and flip
Rotate and flip any Icon font.
Usage
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-hidden="true" |
When an icon is used for only decorative purposes add this attribute to the icon's tag. |
Modifier selectors
| Modifier selector | Description |
|---|---|
fa-rotate-45 |
Rotate 45 degrees clockwise. |
fa-rotate-90 |
Rotate 90 degrees clockwise. |
fa-rotate-135 |
Rotate 135 degrees clockwise. |
fa-rotate-180 |
Rotate 180 degrees clockwise. |
fa-rotate-225 |
Rotate 225 degrees clockwise. |
fa-rotate-270 |
Rotate 270 degrees clockwise. |
fa-rotate-315 |
Rotate 315 degrees clockwise. |
fa-flip |
Mirror icon vertically and horizontally |
fa-flip-horizontal |
Mirror icon horizontally. |
fa-flip-vertical |
Mirror icon vertically. |
.fa-shield - Default font icon.
.fa-rotate-45 - Rotate 45 degrees clockwise.
.fa-rotate-90 - Rotate 90 degrees clockwise.
.fa-rotate-135 - Rotate 135 degrees clockwise.
.fa-rotate-180 - Rotate 180 degrees clockwise.
.fa-rotate-225 - Rotate 225 degrees clockwise.
.fa-rotate-270 - Rotate 270 degrees clockwise.
.fa-rotate-315 - Rotate 315 degrees clockwise.
.fa-flip - Mirror icon vertically and horizontally.
.fa-flip-horizontal - Mirror icon horizontally.
.fa-flip-vertical - Mirror icon vertically.
Icon-fonts\font-icon-rotate.hbs
<div>
<span class="fa fa-2x fa-shield [modifier class]"></span>
</div>
Source:
components/_font-icons.scss