html - 看似相同的 CSS 和标记呈现不同

Question

我已经购买了Ambrosia引导主题，但在实现登录页面时遇到了问题。我的登录页面可以在这里找到。

我遇到的问题是页面内一些文本左侧的小 Twitter、Facebook 和 Info 图标。出于某种奇怪的原因，我的图标和后面的单词之间缺少右边的空间。我无法终生发现差异。请问有什么想法吗？

Answer 1

您需要做的就是在图标和按钮文本之间留一个空格：

<a href="#" class="btn btn-twitter"><i class="icon icon-twitter"></i>Twitter</a>

至：

<a href="#" class="btn btn-twitter"><i class="icon icon-twitter"></i> Twitter</a>

Answer 2

全站修复如下： 更改：

[class^="icon-"]:before, [class*=" icon-"]:before {
    display: inline-block;
    text-decoration: inherit;
}

至

[class^="icon-"]:before, [class*=" icon-"]:before {
        display: inline-block;
        text-decoration: inherit;
        margin-right: 5px;
    }

在 font-awesome.css 中。尽管如果只是这些，您将需要在 Facebook 和 Twitter 一词前面放置一个空格，就像 Dontfeedthecode 说的那样：)

Answer 3

只需在单词空格键之前按空格键，然后就可以了，空格。

代替

<a href="#" class="btn btn-facebook"><i class="icon icon-facebook"></i>Facebook</a> 

利用

<a href="#" class="btn btn-facebook"><i class="icon icon-facebook"></i> Facebook</a> 

Answer 4

在您的 css 文件 font-awesome.css ln160 的以下部分添加填充：

/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
 display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
padding-right: 5px; <!-- This is the important line --!>
}