Question

我购买了Ambrosia引导程序主题但是在实现登录页面时遇到了问题。我的登录页面可以找到here。

我遇到的问题是页面内部一些文字左侧的小型Twitter，Facebook和信息图标。由于一些奇怪的原因，我的图标和后面的文字之间缺少了一些空间。我不能为我的生活发现差异。有什么想法吗？

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

看似相同的CSS和标记呈现方式不同

4 个答案: