web-dev-qa-db-fra.com

Alignement d'icônes Font Awesome dans le bouton md

J'essaie d'aligner des icônes de police géniales à l'intérieur d'un bouton afin qu'elles soient centrées par rapport au texte de la barre d'outils. J'ai le balisage suivant; 

<div ng-app="app">
  <md-toolbar>
      <div class="md-toolbar-tools" md-tall"">
        <h2>
          <span>Icons</span>
        </h2>
        <md-button class="md-icon-button">
          <md-icon md-font-icon="fa-circle" class="fa"></md-icon>
        </md-button>
        <md-button class="md-icon-button">
          <md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon>
        </md-button>
    </div>
  </md-toolbar>
</div>

Qui produit la mise en page suivante;

 Mark above as rendered

fa-lg sur la deuxième icône lui donne une apparence centrée bien que je soupçonne qu’elle est toujours alignée vers le haut. J'ai essayé de coller layout-alignment="center center" sur le md-button sans effet.

Comment puis-je contrôler l'alignement des superbes icônes de polices à l'intérieur de md-buttons et, en particulier, comment puis-je les centrer verticalement dans la barre d'outils? Existe-t-il un Angular moyen matériel de réaliser cet alignement ou un code CSS personnalisé est-il nécessaire ici?

CodePen

javascriptcssangularjsfont-awesomeangular-material
11
Stafford Williams

Il semble que ce soit la hauteur fixe de 24 pixels sur l'élément md-icon qui perturbe l'alignement vertical de l'icône. L'icône FontAwesome étant conçue avec une hauteur dynamique, le fait de forcer une hauteur fixe sur l'élément md-icon n'est pas compatible. le milieu de cet élément n'est plus le milieu de l'icône. Essayez de remplacer ceci avec height: auto; et cela devrait fonctionner avec bonheur, par exemple:

md-icon {
  height: auto;
}
12
t-jam

La hauteur ajoutée pour md-icon est à l'origine du problème

md-icon {    
    height: 24px;    
}

Vous devez ajouter quelques extra class comme suit

<md-icon md-font-icon="fa-circle" class="fa **fa-md**"></md-icon>

et besoin de outrepasser la hauteur 

.fa-md {
    height: auto;
}
4
Shailesh Daund

Essayez ce css

.md-icon-button .fa-circle {
  font-size: 23px;
  width: auto;
}
0
Anandh Sp

J'ai vérifié la dernière version de Angular Material (1.1.1) et le problème a disparu. Prendre plaisir!

0
Envil