Aligner les icônes Font Awesome (fa-2x) avec les icônes empilées (fa-stack)

Je suis en train d'aligner 4 icônes dans une rangée pour la fonctionnalité de partage d'un site web. Quand j'étais à l'aide de 4 icônes normales-ils alignés parfaitement et étaient de la même taille. Maintenant, je vais essayer d'en avoir un empilées de sorte qu'il a une frontière et qu'il est en train de créer quelques problèmes

Voici le code que j'ai été jouer avec:

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-link fa-stack-1x"></i>
  </a>
</div>

Cela crée:

Aligner les icônes Font Awesome (fa-2x) avec les icônes empilées (fa-stack)

Il semble que il ya juste un problème de dimensionnement, j'ai donc joué un peu avec l'aide de fa-lg:

Aligner les icônes Font Awesome (fa-2x) avec les icônes empilées (fa-stack)

Et sans aucun dimensionnement d'aide sur l'élément empilé:

Aligner les icônes Font Awesome (fa-2x) avec les icônes empilées (fa-stack)

Personne ne sait comment aligner une icône avec fa-2x à empiler les icônes?

source d'informationauteur Tom Prats

  1. 16

    Il existe un moyen pour accomplir cette tâche avec un minimum d'utilisation de nouveaux styles CSS:

    Nous devrions utiliser l'enveloppe qui a le même style que twitter et facebook, j'ai de la moyenne des carrés de style avec fa-envelope-square classe. Et de faire tous les items d'ancrage des piles:

    <div class="share-results">
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#">
        <i class="fa fa-envelope-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href="">
        <i class="fa fa-facebook-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href="">
        <i class="fa fa-twitter-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
        <i class="fa fa-square fa-stack-2x"></i>
        <i class="fa fa-inverse fa-link fa-stack-1x"></i>
    </a>
</div>

    En plus de cela, nous le changement de la marge entre un empilement d'éléments pour faire comme dans votre exemple:

    .fa-stack { margin: -2px; }

    Le résultat devrait ressembler à ceci:

    Aligner les icônes Font Awesome (fa-2x) avec les icônes empilées (fa-stack)

    Démo de violon

  2. 6

    Je ne pouvais pas trouver une solution durable à l'aide de la fa-* les classes à lui seul, mais je suis venu avec un couple de façons de le faire, certes légèrement hacky, mais pas terriblement hacky.

    La première approche se superpose à la fa-link icône, texte, sur une normale fa fa-2x fa-square-o icône.

    <div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
  <a class="fa fa-2x fa-square-o stacked" data-toggle="tooltip" title="Share by Link" data-placement="top"></a>
</div>

<style>
    .stacked {
        position:relative;
    }   
    .stacked:after {
        position: absolute;
        font-family: FontAwesome;
        font-size: .6em;
        top:6px;
        left:4px;
        content: "\f0c1"; /*link icon*/
    }
</style>

    La deuxième approche utilise une combinaison de position: fixed et personnalisé font-size pour aider le nouveau lien aligner un peu mieux:

    <div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
  <a class="fa fa-2x fa-stack stacked2" data-toggle="tooltip" title="Share by Link" data-placement="top">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-link fa-stack-1x"></i>
  </a>
</div>

<style>
    .stacked2 {
      position: fixed;
      font-size: 1.1em !important;
      top: -7px;
      left: -4px;
    }
</style>

    La deuxième approche est un peu plus précis, mais j'ai inclus le premier pour être complet si vous souhaitez jouer avec elle. Voici les résultats de fin d', respectivement:

    Aligner les icônes Font Awesome (fa-2x) avec les icônes empilées (fa-stack)

    Et voici un CodePen exemple.

    Je ne sais pas si cela répond à votre question, mais j'espère que cela aide un peu.

  3. 3

    Étant donné que la police impressionnant icônes sont tous sur les largeurs, hauteurs et de la hauteur de ligne, j'ai essayé de créer une solution où tous leurs valeurs étaient les mêmes pour (espérons-le) d'éviter toute confusion et pour faciliter la mise à jour aller de l'avant.

    À l'aide de l'exemple que vous avez donné j'ai installé ces propriétés CSS:

    .fa {
    /*this sets values for all icons*/
    color: gray;
    font-size: 50px;
    line-height: 55px;
    text-decoration: none;
}
.fa-link {
    /*make inner icon smaller but keep line-height the same so its centered vertically*/
    font-size: 30px;
}
.fa-stack-cust {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 55px;
}

    J'ai enveloppé les icônes à l'intérieur d'un non-ordonnée de la liste et de le montrer à tous sur la même ligne. Voici le JS.Violon vous montrer un exemple de travail. Vous serez en mesure de voir les modifications HTML, même si elles sont mineures. Espérons que cela aide.