web-dev-qa-db-ja.com

リンクとアイコンの間のスペース、fontawesome

リンク/段落とアイコンの間にスペースを入れる最良の方法は何ですか？

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

プロジェクトを縮小/拡大するとテキストが元に戻されるため、テキストの前にスペースを置くだけでは機能しません。

あらゆる種類のパディングとマージンを試しました。それらを分離させることはできません。

htmlcssfont-awesome
40
Joe

.fa-fwクラスを使用します。例：<i class="fa fa-cog fa-fw">これにより、視覚的なスペースが追加され（取り除かれなくなります）、一貫性が保たれるため、要素がスタックするとき/スタックするときの見た目が良くなります。

手順： http://fortawesome.github.io/Font-Awesome/examples/enter image description here

88
Christina

最善かどうかはわかりませんが、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>
11
user2019037

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>
7
sodawillow

同じ質問に出会ったばかりなので、フォントが素晴らしいサンプルページからChristinaの提案を詳しく見てみました（申し訳ありませんが、まだコメントすることはできません）。

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

ここでの最大距離は、&nbsp;画面2 からではなく、fa-fw（ 画面1 を参照）によって得られます。フォントアイコン自体の幅を統一するだけなので、見た目を良くするために両方に行ってください。

&nbsp;（スペースとして解釈されます）も、いくつかの簡単なテストに基づいて縮小する際に問題を起こすことはありません。

3
Christoph Farnleitner

古い質問ですが、私はこれらの答えのどれも好きではなかったので、私はこのようにしました：

 <i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>

私はCSSやダーティHTMLを嫌いです。クラスでのみ作業することを好みますが、一部のアイコンではfa-fwは役に立ちません。スパンが進むべき道かどうかはわかりませんが、私のプロジェクトでは良さそうです。

そのため、テキストを何かの周りにラップして、必要な方向にマージンを与えることができます。

2
Eduard

これを使用してください：

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>
1
Rafiqul Islam

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>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
0
Harshit Pant

ここでの答えはどれも役に立たなかった。私はこれをしなければなりませんでした：

<i class="fa fa-reply"><span>Change</span></i>

i span {
  display: inline-block;
  margin-left: 0.3rem;
}
0
Vijayanand Settin