web-dev-qa-db-fra.com

Combinez deux icônes Font Awesome

J'essaie de combiner deux icônes Font Awesome pour créer une pile. J'essaie de fusionner les icônes fa-calendar et fa-clock-o. Ceci parce que j'ai besoin d'une icône pour la date et l'heure.

Donc, pour les combiner, j'ai essayé ceci:

HTML

<span class="icon-stack">
   <i class="fa fa-calendar icon-stack-3x"></i>
   <i class="fa fa-clock-o icon-stack-1x"></i>
</span>

CSS

.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 5em;
  line-height: 4em;
  vertical-align: middle;
}
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}
.icon-stack-3x {
  font-size: 2em;
}

C'est ce que j'ai comme résultat. 

enter image description here

Mais, je veux apporter un peu à droite. Je ne sais pas comment faire ça? Que puis-je faire pour l'amener un peu vers la droite?

cssfontsfont-awesomestacked
5
SSS

Eh bien, comme vous avez créé votre propre CSS pour la position, il vous suffit de définir le text-align sur right, comme ceci:

.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: right;
}

Voici un exemple de travail

Le problème, c'est que ça n'a pas l'air génial. Voici donc quelques alternatives au cas où elles vous seraient utiles: Exemple 1 , Exemple 2

6
musefan

Vous pouvez faire aligner l'horloge à droite ou faire un rembourrage à gauche en ajoutant une nouvelle classe Veuillez consulter le code ci-dessous:

.icon-stack {
      position: relative;
      display: inline-block;
      width: 2em;
      height: 5em;
      line-height: 4em;
      vertical-align: middle;
    }
    .icon-stack-1x,
    .icon-stack-2x,
    .icon-stack-3x {
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center;
    }
    .icon-stack-1x {
      line-height: inherit;
    }
    .icon-stack-2x {
      font-size: 1.5em;
    }
    .icon-stack-3x {
      font-size: 2em;
    }
.right_align { padding-left:5px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<span class="icon-stack">
   <i class="fa fa-calendar icon-stack-3x"></i>
   <i class="fa fa-clock-o icon-stack-1x right_align"></i>
</span>

0
Azeez Kallayi