如何在水平行中的字体真棒图标之间添加空格答案

【问题标题】：How to add space in between font-awesome icons in a horizontal row如何在水平行中的字体真棒图标之间添加空格
【发布时间】：2015-12-10 00:22:28
【问题描述】：

现在已经有一段时间了。我认为我的大脑因编码时间太长而受伤，这是我的 html：

<div class="icons">
    <a href="www.twitter.com/bigmakes15"><i class="fa fa-twitter"></i></a>
    <a href="www.facebook.com/makie.michaux"><i class="fa fa-facebook"></i></a>
    <a href="www.instagram.com/bigmakes15"><i class="fa fa-instagram"></i></a>
</div>

这是我的 CSS：

.icons a {
    display: inline;
    position: fixed;
    text-align: center;
    top: 363px;
    vertical-align: middle;
    z-index: 1000;
    height: 36px;
    width: 36px;
    text-decoration: none;
}

.fa, .fa-instagram, .fa-twitter, .fa-facebook {
     padding-right: 5px;
}

【问题讨论】：

你希望它是什么样子的？
我认为一个简单的可以解决这个问题。

标签： html css padding

【解决方案1】：

您的 html 不正确尝试此修复：

    <a href="www.twitter.com/bigmakes15"> <i class="fa fa-twitter"></i></a>
        <a href="www.facebook.com/makie.michaux"><i class="fa fa-facebook"></i></a>
        <a href="www.instagram.com/bigmakes15"><i class="fa fa-instagram"></i></a>

试试这个css：

display: block;
margin-right: 15px;

或

 display: block;
padding-right: 15px;

【讨论】：

那是一回事，我认为你在谈论 instagram 标签之间有一个空格，而那只是堆栈中的一个错字
不，您忘记关闭标签只需复制并粘贴我给您的代码并替换它
你有它应该是
好的！我明白了。。我修好了。但它仍然没有做我想要的。我想要这个gyazo.com/dc811e61b6c842d2e614427cf6f3ca2c
并确保你有 display:block

【解决方案2】：

如果我正确理解了问题，那是 @jack smith 捕获的 html 问题以及来自其他地方的冲突样式或 position: fixed 的组合 - 不知道那里在做什么，但在你提供的代码中这会让他们都混为一谈。

还要注意，在您的 CSS 中，您可以只说 .fa {...} 而不是 .fa, .fa-instagram, .fa-twitter, .fa-facebook {...}，因为它们都有 fa 类。在这个 sn-p 中，我使用的是 .icons i，但它也可以是 .icons .fa，或者，如果你希望它适用于所有字体真棒图标，只需一个裸露的 .fa

.icons a {
  margin-right: 10px;/*space to the right of the blue*/ outline
  padding-right: 10px;/*between the red and blue outlines*/
  outline: 1px solid blue;
  
  /* you can add any of these */
  /*
  display: inline;
  text-align: center;
  top: 363px;
  vertical-align: middle;
  z-index: 1000;
  height: 36px;
  width: 36px;
  text-decoration: none;
  */
}
.icons i {
  padding-right: 10px;/*space before the red outline*/
  margin-right: 10px;/*also between the red and blue*/
  outline: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="icons">
    <a href="www.twitter.com/bigmakes15"><i class="fa fa-twitter"></i></a>
    <a href="www.facebook.com/makie.michaux"><i class="fa fa-facebook"></i></a>
    <a href="www.instagram.com/bigmakes15"><i class="fa fa-instagram"></i></a>
</div>

【讨论】：