Obracanie Glyphicons/Font Awesome w Bootstrapie

Question

Próbuję uzyskać glify w mojej witrynie bootstrap, aby obracać się po najechaniu kursorem (oprócz zmiany koloru).

Oto moja próba: http://jsfiddle.net/young_greedo17/88g5P/

... który używa tego kodu:

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

... oto 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); 
} 

Oto przykład tego, co ja wyglądające tak, jakby miało się zdarzyć po najechaniu kursorem myszy (patrz: okno z czterema widgetami kolumn ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

Oczywiście, zmiany kolorów, ale nawet to nie zmienia się zgodnie z parametrami, które ustawiam dla przejścia w CSS.

Dzięki!

Answer 1

Problem polega na tym, że próbujesz przekształcić element inline - nie jest to możliwe.

Będziesz need to change wyświetlił wartość bloku glyphicon do wbudowanego.

---

Oto dane z CSS Transforms Module: przekształcalnej elementu

transformowane element jest elementem w jednej z tych kategorii:

• element, którego układ jest sterowany przez model pudełkowy CSS, który jest albo elementem blokowym albo atomowym elementem liniowym, lub którego właściwość wyświetlania jest obliczana do wiersza tabeli, grupy wiersza tabeli, tabeli-nagłówka-grupy, tabeli-stopki -group, table-cell, lub table-caption [CSS21]

• elementem w przestrzeni nazw SVG i nie regulują modelu CSS box, który ma atrybuty transformacji '' lub gradientTransform patterntransform [SVG11] `

Answer 2

Zbiór ustawia display: inline dla Twojego selektora: [class^="icon-"], [class*="icon-"]. Można to zobaczyć na linii 161 w pliku CSS:

[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; 
} 

Dlatego trzeba ustawić .widgetbox [class*="icon-"] mieć właściwość display: block; http://jsfiddle.net/88g5P/6/

EDIT: po patrząc na różnice między display:block; i display:inline-block;, ja przybył na to simple visual answer on Stack overflow.Na podstawie tej odpowiedzi, to chyba lepiej użyć display:inline-block

Answer 3

trzeba nadpisać ustawienia wyświetlania ikony za, ponieważ rotacja nie będzie działać na elementach inline

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

    ... 

    display:block; 
} 

Answer 4

W danym przypadku chodzi o to, że używane ikony mają display: inline-block, dodałem display:block do niestandardowego CSS i teraz działa.

Answer 5

New Font niesamowite wprowadzono obracać notacja http://fontawesome.io/examples/

//Normal: 
<i class="fa fa-shield"></i>&nbsp; normal<br> 

//Rotated: 
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br> 
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br> 
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br> 

//Flipped 
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br> 
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical