0

アイコンをそのように表示する方法を知っています:

<span class='icon-remove'></span>

しかし、追加paddingするとspan、余分なアイコンが表示されます。修正方法は?

span {
    padding-right:60px;
}

フィドル

4

3 に答える 3

1

追加のパディングでより多くのアイコンが表示される理由は、BootstrapがCSSスプライトを使用してアイコンを表示するためです。実際に表示されているのは背景画像です。具体的には、利用可能な多くのアイコンを含む大きな背景画像のセクションです。クラス「icon-remove」の定義は、特定のアイコンを選択するためのbackground-positionプロパティを指定します。パディングを追加すると、背景画像がより多く表示され、追加のアイコンが表示されます。

したがって、解決策は、Rid Iculousが提案したようにマージンを追加するか、別の要素内にカウチしてそれにパディングを追加することです。私はマージンで行きます。

于 2013-02-26T23:18:12.037 に答える
1

グリフは1つの大きな画像マップ(またはいわゆるCSSスプライト)を使用して表示されるため、要素のいずれかの側に十分なスペースを残すと、他のグリフも表示されます。2つの解決策が思い浮かびます。

1)アイコンを含む要素に配置します。

<span><i class='icon-remove'></i></span>

2)またはマージンを使用します:

span { margin-right: 60px }
于 2013-02-26T23:18:19.180 に答える
1

アイコンの右側に空白を入れたいだけだと思いますか?試しましたかmargin

<span class='icon-remove' style='margin-right:60px'></span>
于 2013-02-26T23:11:14.977 に答える