Html 链接和图标之间的空间，字体

在链接/段落和图标之间留出空间的最佳方式是什么

---

我猜

I

是

display:inline

，因此您必须将其

display

设置为

inline块

，以便

右边距

起作用：

i{
显示：内联块；
右边距：1米；
}

---

不知道是否是最好的，但您可以在

i

元素中添加一些

margin right

：

i{
右边距：10px；
}

---

我会使用

.fa fw

类。例如：

这增加了一个可视空间（不会被剥离），并且它是一致的，因此当/如果元素堆叠时，它看起来更好

说明：

---

由于我刚刚遇到了同样的问题，我在字体很棒的示例页面上仔细查看了克里斯蒂娜的建议（对不起，我现在还不能发表评论）

这里的最大距离是通过

（）而不是从

fa-fw

获得的，因为这只是统一字体图标本身的宽度，因此为了获得更好的外观，您可能希望同时使用这两种方法

（将被解释为一个空格）在基于一些快速测试缩小时也不应该出现任何问题。

<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”之后执行内部css-

注意：如果您使用多个图标类型，则填充大小将相差1或-1像素

或者在这样的单词前面加一个空格

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

只要用这个：

a>i{
右边填充：10px；
}

---

这里的答案对我都不管用。我必须这样做：

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

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

更改
我跨越{
显示：内联块；
左边距：0.3雷姆；
}

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

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

继续

我有点讨厌CSS或肮脏的html，我更喜欢只使用类，但是

fa-fw

对一些图标没有用处。不确定span是否是一条可行之路，但它在我的项目中看起来不错

---

因此，您只需将文本环绕在某个内容上，并在所需的方向上留一个边距。

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

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

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

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>

---

咏叹调做什么？@RoCk-Perfect！我认为这是最好的。很好的视觉效果，并且与Bootstrap巧妙地集成在一起。在大多数情况下，这是一个很好的解决方案，但是请注意，它在图标和文本之间的空间并不总是相同的。例如，如果您使用“雪犁”等宽图标。正如上面所说的，它实际上只修复了图标的宽度，但并没有在图标和以下元素之间留出一定的空间：为此，您应该使用一个CSS类/样式，如Bootstrap中的“mx-3”或“mr-3”。您使其可运行，但在代码运行时看不到任何内容。