リンク/段落とアイコンの間にスペースを入れる最良の方法は何ですか?
<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
クラスを使用します。例:<i class="fa fa-cog fa-fw">
これにより、視覚的なスペースが追加され(取り除かれなくなります)、一貫性が保たれるため、要素がスタックするとき/スタックするときの見た目が良くなります。
最善かどうかはわかりませんが、i
要素にmargin-right
を追加できます。
i {
margin-right: 10px;
}
<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>
i
はdisplay: inline
なので、inline-block
が機能するためには、display
をmargin-right
に設定する必要があります。
i {
display: inline-block;
margin-right: 1em;
}
<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>
同じ質問に出会ったばかりなので、フォントが素晴らしいサンプルページからChristinaの提案を詳しく見てみました(申し訳ありませんが、まだコメントすることはできません)。
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
ここでの最大距離は、
画面2 からではなく、fa-fw
( 画面1 を参照)によって得られます。フォントアイコン自体の幅を統一するだけなので、見た目を良くするために両方に行ってください。
(スペースとして解釈されます)も、いくつかの簡単なテストに基づいて縮小する際に問題を起こすことはありません。
古い質問ですが、私はこれらの答えのどれも好きではなかったので、私はこのようにしました:
<i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>
私はCSSやダーティHTMLを嫌いです。クラスでのみ作業することを好みますが、一部のアイコンではfa-fw
は役に立ちません。スパンが進むべき道かどうかはわかりませんが、私のプロジェクトでは良さそうです。
そのため、テキストを何かの周りにラップして、必要な方向にマージンを与えることができます。
これを使用してください:
a > i{
padding-right:10px;
}
<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>
Iの見栄えを良くするために追加する必要がある2つのスペースがあります。まず、アイコンの前とアイコンとテキストフィールドの間に小さなスペースがあります。
したがって、最初のケースではfont awesome classを追加する必要があります
fa-fw
クラス。 2番目の場合、必要なのはNon-Breaking Spaceです。
&nbsp
この方法では、追加のクラスを追加する必要はありません。
これを説明するサンプルコードを次に示します。
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
ここでの答えはどれも役に立たなかった。私はこれをしなければなりませんでした:
<i class="fa fa-reply"><span>Change</span></i>
i span {
display: inline-block;
margin-left: 0.3rem;
}