11

ボタン内で font-awsome アイコンを使用しようとしています。アイコンはFirefoxでは正常に機能しますが、クロムで使用すると正方形として表示されます。私が見つけた唯一のことは、フォントへのパスが正しくない可能性があることでしたが、ここでcdnバージョンを試してみましたが、Firefoxではまだ機能していますが、クロムでは機能していません.

また、コンピューターの静的 html ファイルで同じスタイルシートを試しましたが、正常に動作しています。

使用されている html の例を次に示します。

<a id="btnLogin" href="url.com" class="btn btn-primary btn-large disabled">
    <i class="icon-refresh icon-white"></i> 
    Sign in using Facebook
</a>

また、Web アプリは Rails で構築されており、テンプレートにブートストラップを使用しています。

これを引き起こしている可能性のあるものについてのアイデアはありますか?

4

6 に答える 6

15

同じ問題がありました。しかし、私はそれを簡単に修正しました。

Font Awesomeでは、以前のバージョンの " font " ディレクトリではなく、 " fonts " ディレクトリにフォント ファイルを配置する必要があります。

于 2013-10-25T00:18:00.743 に答える
8

すべてが適切な場所にある場合 (さらに css をチェックしてパスが正しいことを確認し、js ファイルが必要かどうか疑問に思っている場合)、HTML を確認してみてください。

 <i class="fa-users"></i>

これにより、（アイコンの代わりに）質問で言及されている数字/文字が入った正方形が表示されます。

 <i class="fa fa-users"></i>

これでアイコンが表示されます！バージョン 4.2.0 では、faクラスを追加する必要があることを忘れないでください。

それが役に立てば幸い！

于 2014-09-17T08:54:49.183 に答える
1

上記の答えは正しいですが、開始するためのフォントのすばらしいページでは明確ではないと思うので、さらに一歩明確にしたいと思いました。min.css スタイルシートを追加し、ページの head セクションにリンクしました。また、5 つのフォント ファイルを取得して、プロジェクトの "fonts" フォルダーに配置する必要があります。5 つのファイルがあり、それらは次のようになります。

.eot .svg .ttf .woff .otf

ここで github からファイルを取得しました: https://github.com/FortAwesome/Font-Awesome

于 2014-08-13T21:25:36.503 に答える
1

私は同じ問題を抱えており、最終的に問題が何であるかを発見しました。font-familyこれは、タグのを別のものにオーバーライドしたため<i>です。

于 2015-03-06T08:19:03.887 に答える
0

非常に遅い答えですが、これは別の兄弟を助けるかもしれません!

この動作は、display: block; を使用しないことで解決されることがわかりました。i/.fa 要素で。

.fa は標準のインライン ブロックですが、古いブラウザーとの互換性を高めるためにブロックに変更しましたが、インライン ブロックまたは類似のものである必要があります。

それが誰かを助けることを願っています！

于 2015-08-30T10:09:01.290 に答える