html - 一見同一の CSS とマークアップのレンダリングが異なる

Question

Ambrosiaブートストラップ テーマを購入しましたが、ログイン ページの実装に問題があります。私のログインページはここにあります。

私が抱えている問題は、ページ内の小さなテキストの左側にある小さな Twitter、Facebook、および Info アイコンです。何らかの奇妙な理由で、アイコンとそれに続く単語の間の右側に少しスペースがありません。私の人生では、違いを見つけることはできません。アイデアはありますか？

Answer 1

サイト全体の修正は次のようになります: 変更:

[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 で。ただし、これらだけの場合は、Dontfeedthecode が言うように、Facebook と Twitter の単語の前にスペースを入れる必要があります :)

Answer 2

アイコンとボタンのテキストの間にスペースを入れるだけです。

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