web-dev-qa-db-fra.com

Rotation des glyphiques/polices géniales dans Bootstrap

J'essaie de faire pivoter les glyphicons de mon site bootstrap en vol stationnaire (en plus du changement de couleur).

Voici ma tentative: http://jsfiddle.net/young_greedo17/88g5P/

... qui utilise ce code:

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

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

Voici un exemple de ce que je cherche à survivre en vol stationnaire (voir la boîte de texte à quatre colonnes ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

Évidemment, la couleur change, mais cela ne change pas non plus en fonction des paramètres que j'ai définis pour la transition dans le CSS.

Merci!

csstwitter-bootstrapfont-awesome
18
Tim McClure

Le problème est que vous essayez de transformer un élément inline - ce n'est pas possible.

Vous aurez besoin de changer la valeur d'affichage du glyphicon dans le bloc en ligne. 

Voici les détails du module de transformation CSS :

élément transformable

Un élément transformable est un élément de l'une des catégories suivantes: 

  • un élément dont la présentation est régie par le modèle de boîte CSS, qui est un élément de niveau en ligne de niveau bloc ou atomique, ou dont la propriété display est calculée comme suit: table-rangée, groupe-rangée-table, groupe-rangée-table -group, table-cell ou table-caption [CSS21]

  • un élément de l’espace de nom SVG non régi par le modèle de boîte CSS comportant les attributs transform, ‘patternTransform’ ’ou gradientTransform [SVG11] 

18
Adrift

Nouvelle police géniale introduite rotation notation 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
19
drpawelo

Le fichier font-awesome.css définit display: inline pour votre sélecteur: [class^="icon-"], [class*="icon-"]. Vous pouvez le voir à la ligne 161 du fichier 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;
}

Par conséquent, vous devez définir le .widgetbox [class*="icon-"] pour avoir une propriété display: block;http://jsfiddle.net/88g5P/6/

EDIT: après avoir recherché les différences entre display:block; et display:inline-block;, je suis tombé sur cette simple réponse visuelle sur Stack Overflow . Sur la base de cette réponse, il vaut probablement mieux utiliser display:inline-block

2
djiango

Dans votre cas particulier, le problème est que les icônes que vous utilisez ont display: inline-block, j'ai ajouté display:block au CSS personnalisé et cela fonctionne maintenant.

1
Timothy Walters

vous devez remplacer le paramètre d'affichage de l'icône, car la rotation ne fonctionnera pas sur les éléments en ligne

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

     ...

     display:block;
}
1
jbr3zy