Пространство между ссылкой и значком, fontawesome

Ответ 1

Я бы использовал .fa-fw. Например: <i class="fa fa-cog fa-fw"> Это добавляет визуальное пространство (которое не будет удалено), и оно согласованно, поэтому, когда/если элементы складываются, это выглядит намного лучше.

Инструкции: http://fortawesome.github.io/Font-Awesome/examples/

Ответ 2

Не знаю, является ли это лучшим, но вы можете добавить элемент margin-right в элемент 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>

Ответ 3

Я думаю, i есть display: inline, поэтому вам нужно будет установить его display в inline-block для margin-right:

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>

Ответ 4

Поскольку я только что наткнулся на один и тот же вопрос, я более подробно рассмотрел предложение Кристины на странице примера с потрясающими примерами (извините, мне еще не разрешено просто комментировать).

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

Самое большее расстояние здесь достигается   (см. экран 1), а не от fa-fw см. экран 2, так как это просто унифицирует ширину самого значка шрифта, поэтому для более приятного просмотра вы можете захотеть и того и другого.

  (который будет интерпретироваться как пространство тогда) также не должен создавать никаких проблем при минимизации на основе некоторых быстрых тестов.

Ответ 5

Просто используйте это:

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>

Ответ 6

Старый вопрос, но мне не понравился ни один из этих ответов, поэтому я сделал это следующим образом:

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

Я ненавижу CSS или грязный HTML, и я предпочитаю работать только с классами, но fa-fw бесполезен с некоторыми иконками. Не уверен, что span - это путь, но в моем проекте это выглядит хорошо.

Таким образом, вы можете просто обернуть текст вокруг чего-либо и указать, в каком направлении вы хотите.

Ответ 7

Ни один из ответов здесь не работал для меня. Я должен был сделать это:

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

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

Ответ 8

Вам нужно добавить 2 пробела, чтобы интерфейс выглядел хорошо. Во-первых, перед значком и небольшим пространством между значком и текстовым полем.

Так что для первого случая вам нужно добавить класс шрифта awesome

фа-ФВ

учебный класс. для второго случая нам просто нужен неразрывный пробел.

& NBSP

Таким образом, вам не нужно будет добавлять дополнительный класс.

Ниже приведен пример кода для объяснения этого.

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

Ответ 9

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

Вы можете сделать внутренний CSS после -class= "fa fa-reply" - put -style = "padding-right: 5px" -

примечание: если вы делаете больше, чем один тип иконки, размер заполнения будет отличаться на 1 или -1 px

или просто поставить пробел перед словом, как это

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