5

これはとてもばかげた問題ですが、とにかくここに行きます。これが私の基本構造です

/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png

したがって、Contentとimgは両方ともルートディレクトリにあるので、bootstrap.cssファイルからグリフ画像を参照するには、次のようにします。

background-image: url("../../img/glyphicons-halflings.png");

YU NO SHOW？

正しいディレクトリを検索していることを確認するためにチェックする必要のある.jsファイルはありますか？

ああ、これが私が画像をレンダリングしようとしている場所のスニペットです：

 <td>
                @if (item.Something == true)
                {
                    <i class="icon-ok"></i>
                }
                else
                {
                    <i class="icon-remove"></i>
                }
            </td>

アップデート

この質問については多くの見解がありましたので、2セントを共有したいと思いました。質問の投稿BS3.0がリリースされたため、構造が異なるか、関連性がない可能性がありますが、まだ確認していません。ただし、ここに到達した場合は、これが3.0より前のブートストラップであることに注意してください。

私が始めたことの1つは、css / js / imgフォルダーだけでなく、ブートストラップフォルダー全体をプロジェクトに取り込むことです。私は通常、次のような構造でルートスクリプトフォルダに配置します。

/scripts
     /libs
          /boostrap <-- the unzipped folder you get when downloading
              /js
              /css
              /img

'scripts'フォルダは実際にはスクリプトを保持するだけなので、これはいくつかの規則に違反する可能性があります。スクリプト（サプライズ！）とサードパーティライブラリ（したがってlibsフォルダ）にscriptsフォルダを使用しているので、それを正当化します。入手するほとんどのサードパーティコンポーネントには、少なくともjsファイルとcssファイルが含まれています。一部のライブラリ（ブートストラップなど）は他のファイルの場所に依存しているため、手動で分離するのが面倒です。

とにかく、私の2セントですが、ファイルの場所を変更したい場合は、以下の回答をご覧ください。すべての素晴らしいヒント、SOの人々に感謝します！

4

7 に答える 7

3

現在のコードは技術的に機能するはずであり、 jsファイルは必要ありません。

background-image: url("../../img/glyphicons-halflings.png");次のようなディレクトリ構造には完全に問題ありません

/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png

以下のコードを試して、問題がないことを確認してください。

<td><i class="icon-ok"></i></td>

これも失敗する場合は、glyphicons-halflings.pngが十分な権限とともに上記のパスに存在することを再確認してください。

于 2012-12-13T05:55:29.500 に答える
0

私はこれと同じ問題に遭遇しましたが、それはあなたのグリフィコンの出所や場所とは関係ありません。これは人種問題です。残念ながら、テーブルでこのように動作する理由を説明することはできません...しかし、dataTablesでこれが発生していることはわかっています。その回避策は、ページとテーブルが読み込まれた後にhtmlを追加してグリフィコンを追加することでした。完璧ではありませんが、機能します。

于 2013-03-06T22:47:01.800 に答える
0

これを試して

background-image: url("/img/glyphicons-halflings.png");

パスを相対パスから絶対パスに変更しました。パスの先頭にスラッシュを追加すると、サイトのルートから始まります。

それがあなたのために働くかどうか私に知らせてください。

于 2012-12-12T21:51:41.100 に答える
0

これは古い投稿かもしれませんが、この問題の答えを探している他の誰かに役立つことを願っています。

ダウンロードしたファイルにはアンダースコアが含まれていますが、CSSはグリフィコンとハーフリングの間にダッシュが入ったファイルを探しています。どちらか一方を変更し、サーバー上の正しいフォルダーにアップロードされていることを確認してください。

于 2013-04-18T22:58:32.620 に答える
0
  1. glyphicons-halflings.pngとglyphicons-halflings-white.pngをimgフォルダーからコピーします。
  2. cssフォルダーに「img」という名前のサブフォルダーを作成します。
  3. glyphicons-halflings.pngとglyphicons-halflings-white.pngの両方をcss->imgフォルダーに貼り付けます。
  4. ブートストラップスタイルシートを開きます。たとえば、テキストエディタでbootstrap.cssと言いましょう。

  5. （Ctrl + F）「アイコン」を見つけます。6.あなたはクラスを見つけるでしょう。

    [class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}

  6. 背景画像のURLをに変更します

    background-image: url("img/glyphicons-halflings.png");
  7. 「glyphicons-halflings-white.png」を検索
  8. パスも変更します。そしてビンゴ！あなたはそれに乗っています。
于 2013-09-12T13:48:47.507 に答える
0

私は今日これと同じ問題に遭遇し、それは私を混乱させました。リシが上で言ったように、それはうまくいくはずですが、うまくいきませんでした。ディレクトリ構造をトリプルチェックしました。その後、最終的に、グリフィコンファイルにまったくヒットしていないことに気付きました。私はcssのこの問題のある行を削除しました：

<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me -->

そして、すべてが良かったです！

font-awesomeを含める場合は、glyphiconsファイルではなくフォントファイルが検索されることに注意してください。したがって、適切なフォントを追加するか、単純な古いブートストラップを使用してください。

于 2013-09-15T17:48:41.480 に答える
0

グリフアイコンは、フォントフォルダに次のファイルがある場合にのみ読み込まれます。 glyphicons-halflings-regular.eot、、、および。 glyphicons-halflings-regular.svg_glyphicons-halflings-regular.ttfglyphicons-halflings-regular.woff

theme templateまたはのブートストラップをダウンロードするcarousel templateと、これらのファイルがそこにあります。

これらのファイルをWebフォルダーのどこに配置するかを知るには、リンクチェッカーまたはXenuのリンクスルースを実行するだけで、これらのファイルを配置する場所が表示されます。

于 2014-10-05T06:08:04.983 に答える