0

Twitter Bootstrap を使用していますが、アイコンの表示に問題があります。ここで例の 1 つを再作成しようとしています: http://fortawesome.github.io/Font-Awesome/#examples

これが私のコードです：

<head>
    <meta charset="utf-8"/>     
    <script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
</head>
<div class="control-group">
    <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
    <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
</div>

アイコンはまったく表示されません。アイコン画像ファイルなどにリンクする必要がありますか? 私は Firefox でテストしていますが、Font-Awesome のサンプル サイトは正しく読み込まれるので、ブラウザーの選択が問題ではないことは確かです。どんな助けでも大歓迎です！

4

2 に答える 2

0

Font Awesome の「font」フォルダーを「assets」フォルダーに必ずコピーしてください。

Font Awesomeは、 ../img/glyphicons-halflings.pngを使用する Twitter ブートストラップの「アイコン」をオーバーライドします。

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
   -webkit-font-smoothing: antialiased;
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;
}

ページにアイコンをレンダリングするには、フォントファイルが必要です;）

于 2013-04-23T04:50:41.450 に答える
0

Firebug はインストールされていますか？[ネット] タブで 404 エラーを確認する必要があります。説明から、フォント ファイルをサーバーの正しい場所に配置していないと推測されます。

font-awesome.cssの最初の数行を見ると、次の定義が表示されます。

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.0.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-   opentype'),
       url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
       url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

CSS で参照されているファイル (ここにあります) をサーバーにダウンロードし、 assets/fontの下に配置してください。

于 2013-04-22T22:38:21.347 に答える