2012-12-12 43 views
5

這是一個愚蠢的問題,但在這裏,我們無論如何去。這裏是我的基本結構Twitter引導字形圖標不加載

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

所以內容和IMG都在我的根目錄,所以要指涉從我bootstrap.css文件字形圖像我有這樣的:

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

YU NO顯示?

是否有.js文件我需要檢查以確保它正在正確的目錄中查找?

哦,這裏是的,我想獲得的圖像來呈現一個片段:

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

UPDATE

還有的是有很多的意見這個問題,所以我想我會分享我的兩分錢。一個注意事項是,自從發佈BS 3.0問題以來,現在已經不存在了,所以結構可能是不同的和/或不相關的,還沒有看過它。但是如果你到了這裏,請記住這是3.0之前的Bootstrap。

我已經開始這樣做的一件事,使得我沒有必要惹惱任何事情,就是將整個bootstrap文件夾放到項目中,而不僅僅是css/js/img文件夾。我通常把它放在我的根文件夾中的腳本,像這樣的結構:

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

這可能會破壞某些約定因爲「腳本」文件夾真的應該牽住腳本。我證明這一點,因爲我使用腳本文件夾(驚喜!)和第三方庫(因此libs文件夾)。你獲得的大多數第三方組件至少有js和css文件,而我只是懶得讓它們手動分離,因爲一些庫(如bootstrap)依賴於其他文件的位置。

無論如何,我的兩毛錢,如果你想改變文件的位置,請看下面的答案。所有偉大的提示,感謝所有人!

回答

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存在於您所說的路徑中,並具有足夠的權限。

+0

是的,我在桌子上有另一個地方,它正是這個:但仍然沒有。非常奇怪的問題。 – ledgeJumper

+0

你檢查過,如果文件_glyphicons-halflings.png_存在於服務器上,並呈現正確.. ?? –

+0

在Chrome中打開頁面,右鍵單擊字形應顯示的位置,然後單擊「檢查元素」。這將啓動Chrome的開發者工具...在「元素」選項卡中找到您的「」,然後點擊它以顯示適用於該元素的CSS規則。其中一條規則將成爲glyphicons-haflings.png的路徑。右鍵單擊該路徑,然後在新選項卡中打開。如果圖像不顯示,請查看URL路徑並確定您需要對CSS規則進行的調整。 –

0

試試這個

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

我改變了路徑從相對路徑爲絕對路徑。通過在路徑的開頭添加斜槓,它將從您的站點的根目錄開始。

讓我知道,如果這對你有用。

+0

這是一個不幸去.. – ledgeJumper

+0

打開正斜槓代表根 –

+0

爲什麼downvote到底?這對我來說似乎是一個可行的建議。 – ledgeJumper

0

我遇到了同樣的問題,它與您的圖標的來源或位置無關。這是一個種族問題。我不幸地不能告訴你爲什麼它在表格中表現得像這樣...但是我知道在我的dataTables中發生這種情況,我的方法是在頁面和表格加載後通過附加html來添加圖形。這不是完美的,但它的工作原理。

0

這可能是一箇舊帖子,但我希望它可以幫助別人尋找這個問題的答案。

我下載的文件包含一個強調但CSS正在尋找與glyphicons和半身人之間的破折號的文件。更換一個或另一個,並確保將其上傳到服務器上的正確文件夾。

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,半身人,white.png」
  8. 改變它的路徑也。 和賓果!你在上面。
0

我今天遇到同樣的問題,它讓我感到困惑。正如Rishi上面所說,它應該可以工作,但它卻沒有。我三重檢查了我的目錄結構。最後我意識到它根本沒有打我的圖形文件。我刪除了這個有問題的css行:

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

而且一切都很好!

請記住,如果您要包含font-awesome,那麼它將查找字體文件而不是glyphicons文件。因此,要麼添加適當的字體,要麼使用普通的舊bootstrap。

0

只有在字體文件夾中包含以下文件時,圖標圖標纔會加載。 glyphicons-halflings-regular.eotglyphicons-halflings-regular.svgglyphicons-halflings-regular.ttfglyphicons-halflings-regular.woff

下載theme template或引導程序的carousel template,您會在那裏找到這些文件。

要知道將這些文件放在網絡文件夾中的位置,只需運行Link CheckerXenu's link sleuth,它會告訴你放置這些文件的位置。