it-roy-ru.com

Пробел между ссылкой и значком

Какой лучший способ получить пробел между ссылкой/абзацем и значком? 

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

Не работает просто поставить пробел перед текстом, потому что он будет изменен обратно, когда вы уменьшите/уменьшите проект. 

Я пробовал со всеми видами отступов и полей. Не могу их разлучить. 

37
Joe

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

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

78
Christina

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

10
user2019037

Я предполагаю, что 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>

7
sodawillow

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

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

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

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

2
Eduard

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

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

Наибольшее расстояние здесь получают &nbsp; ( см. Экран 1 ), а не fa-fwсм. Экран 2 , поскольку это просто объединяет ширину самого значка шрифта, поэтому для более приятного вида вы можете захотеть пойти на оба.

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

2
Christoph Farnleitner

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

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

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

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

фа-ФВ

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

& 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>
0
Harshit Pant

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

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

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