Les icônes de bootstrap (Glyphicons) sont légèrement relevées lors de l'utilisation de Google Fonts, comment puis-je résoudre ce problème?

Si j'ajoute la suite Google Polices dans la balise head du document

<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">

Bootstrap icônes (Glyphicons) sont positionnés légèrement vers le haut, comme Vous pouvez le voir sur ce lien: http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

Les icônes de bootstrap (Glyphicons) sont légèrement relevées lors de l'utilisation de Google Fonts, comment puis-je résoudre ce problème?

Comment puis-je résoudre ce problème?

source d'informationauteur Max

  1. 6

    Je ne pense pas que le problème est sur les polices Google, mais plutôt la combinaison de la taille de police et vertical-align. La police par défaut de la taille de l'icône dans le Bootstrap est 14px et dans la déclaration de icon- nous avons vertical-align: text-top;voir code ci-dessous. 

    [class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

    Dans votre "tableau de bord" sur le bouton, il semble que la taille de police est plus grande que 14px, peut-être 22px? Une solution pourrait être de créer une alternative/extension de sélecteur pour votre bouton et changer vertical-align à baseline:

    [class^="icon-"] .my-class,
[class*=" icon-"] .my-class {
  vertical-align: baseline;
}

    Mais n'oubliez pas que le centre visuel dépend de la parole; "tableau de bord" a par exemple pas de jambages (voir plus sur l'anatomie de la typographie). Si baseline ne semble pas bon d'essayer quelques-uns des autres, voir rendez-vous ici.

    La solution proposée par @user1751766 est également possible. Mais je suggère de .my-class à la portée de cette variante de la déclaration d'Amorçage par défaut de déclaration.

  2. 5

    Aller à Bootstrap.css

    .glyphicon {
  position: relative;
  top: 11px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;

    Mess avec top jusqu'à ce qu'il les lignes de la façon que vous le souhaitez. 11px a fonctionné pour moi sur le cœur, mais il pourrait dépendre sur l'icône /comment vous essayez de l'utiliser. Juste bricoler jusqu'à ce qu'il semble bon.

  3. 4

    Ce qui a bien fonctionné pour moi:

    span.glyphicon {
    vertical-align: middle;
    margin-top: -5px;
}
  4. 1

    J'ai utilisé le CSS comme ceci avec Bootstrap dans le passé:

    [class^="icon-"] {
margin-top: 3px;
}

    Il suffit de jouer avec les margin-top jusqu'à ce qu'il ressemble à droite.

    Bonne chance!