链接和图标之间的空间，fontawesome

Question

在链接/段落和图标之间获取空格的最佳方法是什么？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在文本之前放置一个空格是不行的，因为当你缩小/ uglify项目时它会被改回来。

我试过各种填充和边距。无法将它们分开。

Answer 1

我会使用.fa-fw类。例如：<i class="fa fa-cog fa-fw">这会增加一个可视空间（不会被剥离）并且它是一致的，所以当/如果元素堆叠它看起来好多了。

说明：http://fortawesome.github.io/Font-Awesome/examples/

Answer 2

不知道是否最好，但您可以向margin-right元素添加一些i：

＆＃13;

＆＃13;

i {
  margin-right: 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

此处的最远距离是 （see screen 1）而非fa-fw see screen 2获得的，因为这只是统一字体图标本身的宽度，所以为了更好看，你可能想要两者兼顾。

 （这将被解释为空格）在根据一些快速测试进行缩小时也不应该有任何麻烦。

Answer 5

老问题，但是我不喜欢这些答案，所以我这样做：

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

我有点讨厌CSS或肮脏的html，并且我更喜欢只使用类，但是fa-fw对某些图标没有用。不确定跨度是否可行，但是在我的项目中看起来不错。

因此，您只需将文本包裹在某物周围，并在所需的方向留出一定的空白。

Answer 6

请使用：

＆＃13;

＆＃13;

a > i{
  padding-right:10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 7

这里的答案都不适用于我。我不得不这样做：

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

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

Answer 8

您需要添加2个空格以使UI看起来不错。首先，在图标之前，在图标和文本字段之间留一点空格。

因此，在第一种情况下，您需要添加一个真棒字体

  

fa-fw

班。对于第二种情况，我们只需要一个非突破性空间。

  

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

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

你可以在-class =“fa fa-reply”之后做内部css - 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>

Answer 10

<i class="fa fa-cloud mr-2"></i> 

这集成了Bootstrap，并且不需要任何额外的标签！