Ajouter une info bulle à l'icône font awesome

Utilisez simplement le titre dans la balise comme

<i class="fa fa-edit" title="Edit Mode"></i>

Cela affichera 'Edit Mode' lorsque vous passez cette icône.

Vous devez utiliser l'attribut' title 'avec' data-toogle ' (bootstrap).

Par exemple

<i class="fa fa-info" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Et n'oubliez pas d'ajouter le code javascript pour afficher l'info-bulle

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

Https://codepen.io/jonmilner/pen/bfkKF Est peut-être un exemple utile.

<div class="social-icons">
  <a class="social-icon social-icon--codepen">
    <i class="fa fa-codepen"></i>
    <div class="tooltip">Codepen</div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Color Variables */
$color-codepen: #000;

/* Social Icon Mixin */
@mixin social-icon($color) {
  background: $color;
  background: linear-gradient(tint($color, 5%), shade($color, 5%));
  border-bottom: 1px solid shade($color, 20%);
  color: tint($color, 50%);

  &:hover {
    color: tint($color, 80%);
    text-shadow: 0px 1px 0px shade($color, 20%);
  }

  .tooltip {
    background: $color;
    background: linear-gradient(tint($color, 15%), $color);
    color: tint($color, 80%);

    &:after {
      border-top-color: $color;
    }
  }
}

/* Social Icons */
.social-icons {
  display: flex;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2.5rem;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  transition: all 0.15s ease;

  &:hover {
    color: #fff;

    .tooltip {
      visibility: visible;
      opacity: 1;
      transform: translate(-50%, -150%);
    }
  }

  &:active {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
  }

  &--codepen { @include social-icon($color-codepen); }

  i {
    position: relative;
    top: 1px;
  }
}

/* Tooltips */
.tooltip {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.8rem 1rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, -100%);
  transition: all 0.3s ease;
  z-index: 1;

  &:after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    content: "";
    border: solid;
    border-width: 10px 10px 0 10px;
    border-color: transparent;
    transform: translate(-50%, 100%);
  }
}

Essayez ceci :

Font Awesome est une bibliothèque extrêmement simple mais puissante à utiliser, avec 634 icônes disponibles en quelques mots.

Comment ça marche? Font Awesome utilise des caractères Unicode stockés dans un ../ fonts directory pour changer les éléments I. fa au caractère Unicode respectif, en tant que tel affichant l'icône sous forme de texte.

Comment créer une icône? Toutes les classes d'icônes doivent être un élément i, ou un élément italique, principalement pour les meilleures pratiques, mais améliore également les performances avec une police impressionnante. Toutes les icônes ont également la classe fa sur eux. Cela dénote une icône et ne fonctionnera pas sans lui. Après cela, il suffit d'ajouter l'icône que vous voulez, préfixé avec un autre fa-. Un exemple fini est ci-dessous:

Devient fa-crayon

Parce que font awesome fonctionne sur les caractères unicode, il permet également toute manipulation de texte à appliquer à elle ainsi, comme la taille de la police, la couleur, et plus encore.

demo: https://jsfiddle.net/u9Lcp3vz/