アイコンをそのように表示する方法を知っています:
<span class='icon-remove'></span>
しかし、追加padding
するとspan
、余分なアイコンが表示されます。修正方法は?
span {
padding-right:60px;
}
アイコンをそのように表示する方法を知っています:
<span class='icon-remove'></span>
しかし、追加padding
するとspan
、余分なアイコンが表示されます。修正方法は?
span {
padding-right:60px;
}
追加のパディングでより多くのアイコンが表示される理由は、BootstrapがCSSスプライトを使用してアイコンを表示するためです。実際に表示されているのは背景画像です。具体的には、利用可能な多くのアイコンを含む大きな背景画像のセクションです。クラス「icon-remove」の定義は、特定のアイコンを選択するためのbackground-positionプロパティを指定します。パディングを追加すると、背景画像がより多く表示され、追加のアイコンが表示されます。
したがって、解決策は、Rid Iculousが提案したようにマージンを追加するか、別の要素内にカウチしてそれにパディングを追加することです。私はマージンで行きます。
グリフは1つの大きな画像マップ(またはいわゆるCSSスプライト)を使用して表示されるため、要素のいずれかの側に十分なスペースを残すと、他のグリフも表示されます。2つの解決策が思い浮かびます。
1)アイコンを含む要素に配置します。
<span><i class='icon-remove'></i></span>
2)またはマージンを使用します:
span { margin-right: 60px }
アイコンの右側に空白を入れたいだけだと思いますか?試しましたかmargin
:
<span class='icon-remove' style='margin-right:60px'></span>