web-dev-qa-db-fra.com

Espace entre lien et icône, fontawesome

Quel est le meilleur moyen de laisser un espace entre le lien/paragraphe et l'icône? 

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

Ne fonctionne pas pour simplement mettre un espace avant le texte, car il sera modifié lorsque vous réduirez/réduirez le projet. 

J'ai essayé avec toutes sortes de rembourrages et de marges. Je ne peux pas les faire se séparer. 

htmlcssfont-awesome
37
Joe

Je voudrais utiliser la classe .fa-fw. Par exemple: <i class="fa fa-cog fa-fw"> Ceci ajoute un espace visuel (qui ne sera pas supprimé) et il est cohérent, donc quand/si les éléments s'empilent, ça a l'air beaucoup mieux.

Instructions: http://fortawesome.github.io/Font-Awesome/examples/enter image description here

78
Christina

Je ne sais pas si c'est le meilleur mais vous pouvez ajouter un margin-right à l'élément i:

i {
  margin-right: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

10
user2019037

Je suppose que i est display: inline et vous devrez donc régler sa display sur inline-block pour margin-right pour fonctionner

i {
  display: inline-block;
  margin-right: 1em;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

7
sodawillow

Ancienne question, mais je n’ai aimé aucune de ces réponses, je l’ai fait ainsi:

 <i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>

Je déteste les CSS ou le html sale et je préfère travailler uniquement avec des classes, mais fa-fw n'est pas utile avec certaines icônes. Je ne sais pas si la durée est la solution, mais cela a l'air bien dans mon projet.

Ainsi, vous pouvez simplement envelopper votre texte autour de quelque chose et lui donner une marge dans la direction que vous souhaitez.

2
Eduard

Comme je viens juste de trouver la même question, j’ai jeté un œil plus attentif sur la suggestion de Christina figurant dans la page d’exemple Font-Awesome (désolé, je n’ai pas le droit de commenter pour le moment).

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

La distance la plus grande ici est obtenue par &nbsp; ( voir écran 1 ) plutôt que depuis fa-fwvoir écran 2 puisque ceci ne fait qu’unifier la largeur de l’icône de police elle-même. aller pour les deux.

&nbsp; (qui sera interprété comme un espace à ce moment-là) ne devrait pas non plus causer de problèmes lors de la réduction en fonction de quelques tests rapides.

2
Christoph Farnleitner

Il suffit d'utiliser ceci:

a > i{
  padding-right:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply  "></i>Change</a>

1
Rafiqul Islam

Il y a 2 espaces que vous devez ajouter pour que l'interface utilisateur soit belle. Tout d'abord, avant l'icône et un peu d'espace entre l'icône et le champ de texte.

Donc, pour le premier cas, vous devez ajouter un font awesome class

fa-fw

classe. pour le second cas, nous avons juste besoin d'un Espace insécable .

& nbsp

De cette façon, vous n'aurez pas besoin d'un cours supplémentaire pour être ajouté.

Voici un exemple de code pour expliquer cela. 

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
0
Harshit Pant

Aucune des réponses ici n'a fonctionné pour moi. Je devais faire ceci:

<i class="fa fa-reply"><span>Change</span></i>

i span {
  display: inline-block;
  margin-left: 0.3rem;
}
0
Vijayanand Settin