Space在link和icon之间，fontawesome

Question

在 link/paragraph 和图标之间添加 space 的最佳方法是什么？

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

只在文本前放一个 space 是行不通的，因为当你 minify/uglify 项目时它会被改回来。

我尝试了各种填充和边距。不能让他们分开。

Answer 1

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

Answer 3

我会使用 .fa-fw class。例如：<i class="fa fa-cog fa-fw"> 这会添加视觉效果 space（不会被删除）并且它是一致的，因此 when/if 元素堆叠起来看起来好多了。

说明：https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Answer 4

因为我刚遇到同样的问题，所以我仔细查看了 Christina 在 font-awesome 示例页面中的建议（抱歉，我还不能发表评论）。

<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) rather than from fa-fw see screen 2 因为这只是统一了字体图标本身的宽度，所以为了更好看，你可能想要两者兼顾。

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

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>

你可以在 -class="fa fa-reply"- put -style="padding-right:5px"-

之后做 inner css

注意：如果你做的不止一种图标类型，填充大小将相差 1 或 -1 像素

或者像这样在单词前加一个space

<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

只需使用这个：

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>

Answer 7

None 这里的答案对我有用。我必须这样做：

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

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

Answer 8

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

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

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

因此，您可以将文字环绕在某处，并在您想要的方向留出边距。

Answer 9

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

所以对于第一种情况你需要添加一个font awesome class

fa-fw

class。对于第二种情况，我们只需要 Non-Breaking Space.

&nbsp

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

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

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

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

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

Space在link和icon之间，fontawesome

Space between link and icon, fontawesome

html

css

font-awesome