Rotating Glyphicons / Font Awesome in Bootstrap

Question

I'm trying to get the glyphicons in my bootstrap site to rotate on hover (in addition to changing color).

Here's my attempt: http://jsfiddle.net/young_greedo17/88g5P/

...which uses this code:

<div class="widgetbox">
    <br><br>
    <div class="icon-calendar icon-large"></div>
    <h5>Add an event</h5>
</div>

... here's the CSS:

.widgetbox {
    width: 250px;
    height: 250px;
    background-color: black;
    color: white;
    text-align: center;
}
.widgetbox [class*="icon-"] {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.widgetbox:hover [class*="icon-"] {
    color: #24a159 !important;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

Here's an example of what I'm looking to happen on hover (see four column widget box ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

Obviously, the color changes, but even that doesn't change in accordance with the parameters I'm setting for the transition in the CSS.

Thanks!

+1 Nice idea. FYI, you have a type-o that does not parse in SCSS. Change the last line from `.rotate(360)` to `transform:rotate(360)`, and then it will parse in scss converters. — eduncan911, Jun 12 '14 at 02:41

drpawelo · Answer 1 · 2021-05-05T15:38:59.970

New Font awesome introduced rotate notation (run code snippet below to see it in action) http://fontawesome.io/examples/

Just add a MODIFIER CLASS from fa-rotate-90 (90 or 180, 270) and fa-flip-horizontal (horizontal or vertical).

<i class="fa fa-head-side-mask"></i>normal<br>
<i class="fa fa-head-side-mask fa-rotate-90"></i>
<i class="fa fa-head-side-mask fa-flip-horizontal"></i>
<i class="fa fa-head-side-mask fa-rotate-90 fa-flip-horizontal"></i>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<br>Normal:<br>

    <i class="fa fa-head-side-mask"></i>normal<br>

<br>Rotated:<br>

    <i class="fa fa-head-side-mask fa-rotate-90"></i>fa-rotate-90<br>
    <i class="fa fa-head-side-mask fa-rotate-180"></i>fa-rotate-180<br>
    <i class="fa fa-head-side-mask fa-rotate-270"></i>fa-rotate-270<br>
    
<br>Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-head-side-mask fa-flip-vertical"></i>  fa-flip-horizontal<br>
    
    
<br>Rotated and Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-vertical fa-rotate-90"></i>fa-flip-vertical fa-rotate-90

Adrift · Accepted Answer · 2013-12-10T14:05:08.883

19

The problem is that you're trying to transform an inline element - this isn't possible.

You'll need to change the display value of the glyphicon to inline block.

Here are the details from the CSS Transforms Module:

transformable element

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11]`

edited Dec 10 '13 at 14:05

answered Sep 04 '13 at 03:25

Adrift

58,167
12
92
90

Still not supported in safari or opera though (works in current safari beta): http://css-tricks.com/transitions-and-animations-on-css-generated-content/ – dc5 Sep 04 '13 at 03:50
I haven't but the article has been updated more recently. I don't know for sure about opera though. – dc5 Sep 04 '13 at 03:54

score 3 · Answer 3 · edited May 23 '17 at 12:33

The font-awesome.css file sets display: inline for your selector: [class^="icon-"], [class*="icon-"]. You can see this at line 161 of the CSS file:

[class^="icon-"],
  [class*=" icon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
}

Therefore you need to set the .widgetbox [class*="icon-"] to have a property display: block; http://jsfiddle.net/88g5P/6/

EDIT: after looking up the differences between display:block; and display:inline-block;, I came upon this simple visual answer on Stack overflow. Based on this answer, it's probably better to use display:inline-block

score 1 · Answer 4 · answered Sep 04 '13 at 03:42

1

you need to override the icon's display setting, since the rotation won't work on inline elements

.widgetbox [class*="icon-"] {

     ...

     display:block;
}

answered Sep 04 '13 at 03:42

jbr3zy

644
3
8

score 1 · Answer 5 · answered Sep 04 '13 at 03:51

1

In your particular case the issue is that the icons you are using have display: inline-block, I added display:block to the custom CSS and it now works.

answered Sep 04 '13 at 03:51

Timothy Walters

16,866
2
41
49

Rotating Glyphicons / Font Awesome in Bootstrap

5 Answers5

Linked