Odstęp między linkiem a ikoną, fontawesome

Question

Jaki jest najlepszy sposób na uzyskanie spacji między łączem/akapitem a ikoną?

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

Nie działa po prostu umieścić spację przed tekstem, ponieważ zostanie on zmieniony z powrotem, gdy minify/zeszpecić projektu.

Próbowałem z różnymi rodzajami wypełnień i marginesów. Nie mogę ich rozdzielić.

Answer 1

Chciałbym użyć klasy .fa-fw. Na przykład: <i class="fa fa-cog fa-fw"> Dodaje to przestrzeń wizualną (która nie zostanie usunięta) i jest spójna, więc kiedy/jeśli elementy układają się w stos, wygląda o wiele lepiej.

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

Answer 2

Chyba i jest display: inline więc będziesz musiał ustawić swój display do inline-block dla margin-right pracować:

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

Nie wiem, czy jest najlepszy, ale można dodać część margin-right do elementu 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

Od Właśnie natknąłem tym samym pytaniem Wziąłem bliżej przyjrzeć sugestią Christiny z przykładu stronie font-niesamowite (przepraszam, ja po prostu nie wolno komentować jeszcze).

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

Najbardziej odległość tutaj jest zdobyte przez   (see screen 1) zamiast z fa-fwsee screen 2 ponieważ jest to tylko ujednolicenie szerokości samego font-ikoną, więc o ładniejszy wygląd może chcesz iść do obu.

  (który zostanie zinterpretowany jako spacja) również nie powinien powodować żadnych problemów podczas minifikacji na podstawie szybkich testów.

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> 

można zrobić wewnętrzną css po -class = "fa fa-post" - umieścić -Style = "padding-prawo: 5px" -

uwaga: jeśli robisz więcej niż jedna ikona wpisać wyściółka rozmiar będzie inny od 1 lub -1 px

Answer 6

Wystarczy użyć tego:

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>