Spazio tra il link e l'icona, fontawesome

Question

Qual è il modo migliore per ottenere uno spazio tra il collegamento/paragrafo e l'icona?

<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>

non funziona a mettere solo uno spazio prima del testo perché sarà cambiato di nuovo quando esegui la minimizzazione/uglify il progetto.

Ho provato con tutti i tipi di padding e margini. Non riesco a farli separare.

Answer 1

Vorrei utilizzare la classe .fa-fw. Ad esempio: <i class="fa fa-cog fa-fw"> Questo aggiunge uno spazio visivo (che non verrà rimosso) ed è coerente, quindi quando/se gli elementi lo impilano sembra molto meglio.

Istruzioni: http://fortawesome.github.io/Font-Awesome/examples/

Answer 2

Credo i è display: inline quindi dovrete impostare la sua display-inline-block per margin-right a lavorare:

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>

Answer 3

Non so se è la migliore, ma è possibile aggiungere alcuni margin-right nell'elemento 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>

Answer 4

Dal momento che ho appena incontrato la stessa domanda ho preso uno sguardo più da vicino a suggerimento di Christina dalla pagina di esempio font-impressionante (mi dispiace, io non sono autorizzato a lasciare un commento, appena ancora).

<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> 

Il più distanza qui si guadagna   (see screen 1), piuttosto che da fa-fwsee screen 2 poiché questo è solo unificando la larghezza del font-icona stessa, quindi per un look più bello si può decidere di andare per entrambi.

  (che verrà interpretato come uno spazio quindi) inoltre non dovrebbe creare problemi durante la minificazione in base ad alcuni test rapidi.

Answer 5

<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" style="padding-right:5px"></i>Change</a> 

si può fare css interno dopo class = "fa fa-risposta" - mettere in stile = "padding-right: 5px" -

nota: se fare di più quindi digitare un'icona dimensione riempimento sarà diverso da 1 o -1 px

Answer 6

Proprio usate questo:

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>