web-dev-qa-db-fra.com

Aligner le texte à côté de l'icône FontAwesome

Bonjour, je ne parviens pas à aligner le texte à côté d'une icône de police géniale. J'ai essayé plusieurs choses, mais aucune d'entre elles ne semble fonctionner. Ce que j'essaie de faire, c'est de créer un panneau avec un bouton sur un côté que vous pouvez cliquez et l'appel sera composé avec l'icône fontawesome et le texte de l'autre côté du panneau (j'utilise bootstrap v3.3.2 pour le construire)

Voici une image que j'ai ce que j'essaie de faire http://i.imgur.com/0yCsdyG.jpg

et voici une image de ce à quoi il ressemble actuellement http://i.imgur.com/UpMj6eJ.jpg

<div class="panel panel-default">
  <div class="panel-body">
    <div class="col-lg-8">
      <i class="fa fa-phone fa-2x" style="align: middle;"></i>
      <h3>Call us</h3>
    </div>
    <div class="col-lg-4 text-center">
      <div class="btn-group btn-group-justified" style="align: middle;" role="group" aria-label="...">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" <a href="tel:">Click the button to call us</a>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
csshtml5twitter-bootstrapfont-awesome
6
reece.78

Pour avoir un contrôle complet/indépendant sur la position, l'aspect et la taille de l'icône représentant une police géniale, essayez l'une des solutions ci-dessous.

  1. Ajoutez position with un property value de relative au style h3 pour contrôler le chevauchement.

  2. Utilisez :after sélecteur content pour insérer l'icône

  3. Ajoutez position with un property value de absolute au h3: après le bloc de code CSS

  4. Obtenez la position souhaitée avec les valeurs de propriété left, right, top ou bottom.

h3 {
  position: relative; /* Helps us control overlap */
  padding-left: 25px; /* Creates space for the Phone Icon */
  }

h3:after {
  content: '\f095';
  font-family: fontAwesome;
  position: absolute;
  left: 0; /* Adjust as needed */
  top: 3px; /* Adjust as needed */
  }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<h3>Call us</h3>

Remarque: Vous pouvez ajuster la taille de l'icône avec la valeur de la propriété CSS font-size.

7
Sleek Geek

Il existe un moyen très simple, si votre police a la même taille de police que votre texte (il s’agit généralement d’une bonne pratique), incluez les balises dans les balises de texte:

<p>
  <i class="fa fa-check"></i>
 Text text text
</p>
2
Maxime Boué

Essaye ça :

<i class="fa fa-phone fa-2x" style="vertical-align: middle;"></i>
2
Thibault Henry

Utilisez la classe .media.

<div class="media">
    <div class="media-left">
        <i class="fa fa-home"></i>
    </div>
    <div class="media-body">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>
2
kjdion84

Pour la postérité, si vous voulez utiliser CSS flexbox, l’alignement d’icônes en plus du texte est trivial.

J'ai choisi Bootstrap et son panel dans la solution pour répondre à la question initiale.

Les points clés à noter ici sont:

  • display: flex pour que les enfants directs passent dans la direction par défaut (rangée)
  • align-items: center à aligner le long de la direction de flexion (alignement vertical dans ce cas)
  • flex: 1 pour que la section médiane s'agrandisse autant que possible en écartant les deux côtés
.banner {
  display: flex;
  align-items: center;
}

.banner-start h3 {
  display: inline-block;
}

.banner-start i {
  padding: 0 6px;
}

.banner-middle {
  flex: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
  <div class="panel-body">
    <div class="banner">
      <div class="banner-start">
        <i class="fa fa-phone fa-2x"></i>
        <h3>Call us</h3>
      </div>
      <div class="banner-middle">

      </div>
      <div class="banner-end">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"><a href="tel:">Click the button to call us</a>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
0
Ryan H.