html - HTML：fontawesomeアイコンが2回表示されます

Question

HTML5とFontAwesomeでウェブページを作ろうとしています。私の問題は次のとおりです。FontAwesomeアイコンを含めると、2回表示され、両方のコピーが互いに積み重なっています（画像を参照） 。

fontawesome.cssを少し変更しましたが、問題を認識した後、ファイルをダウンロードから再度コピーして、すべての変更をリセットしました。問題はまだあります。だから私の.cssの部分は言う：

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

そして私はそれを見出しに含めます

<h3><i class="icon-star-empty"></i>&nbsp;Angebote</h3>

残念ながら、私は実際には問題を認識していません。

.cssの「：before」を削除して（とにかく何をするのですか？）、「display：」で遊んで、星が少し上空にあるので「vertical-alignment」を追加してみました...何も役に立ちませんでした。

誰かが似たようなものを持っていましたか？この問題はFirefox、Opera、IEで発生します。

よろしく、アンナ

Answer 1

私は自分で問題を抱えていたので、何を修正する必要があるかを理解しました。bootstrap.css で削除

.icon-star-empty {   background-position: -144px 0; }

基本的にcssはbootstrap.cssとfont-awesome.cssの2か所にあるため、2回表示されます。

Answer 2

さらに詳しく説明できますが、基本的に、この問題は 3.0 (数週間前にリリース) では発生しないはずです。

これは、sprites.less の icon-class の Bootstrap 設定クラスに由来します。sprites.less をコメントアウトするよう指示されていますが、多くの人がそれを見逃しています。新しいバージョンでは、この問題を修正するオーバーライドがあります。

また、Font Awesome を本当に簡単に使いたい場合は、Bootstrap CDN を使用できます: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

Answer 3

これを行うだけです

.fa-heart:before{content: '';}