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

Question

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

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

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

我试过各种填充和边距.不能让他们分开.

Answer 1

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

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

Answer 2

老问题，但我不喜欢这些答案中的任何一个，所以我这样做了：

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

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

因此，您可以将文本包裹在某物周围，并在您想要的方向上留出边距。

Answer 3

不知道是否是最好的,但你可以添加一些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>

Answer 4

您需要添加 2 个空格才能使 UI 看起来更好。首先，在图标之前以及图标和文本字段之间有一点空间。

因此，对于第一种情况，您需要添加一个font Awesome 类

FA-FW

班级。对于第二种情况，我们只需要一个不间断空格。

 

这样您就不需要添加额外的类。

下面是一个示例代码来解释这一点。

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

我猜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 6

因为我刚刚遇到同样的问题，所以我从字体很棒的示例页面仔细查看了克里斯蒂娜的建议（抱歉，我还不能发表评论）。

<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获得的，因为这只是统一了字体图标本身的宽度，因此为了获得更好的外观，您可能需要同时使用两者。

 （然后将被解释为空格）在基于一些快速测试的缩小时也不应该造成任何麻烦。