Twitter Bootstrap 3 Glyphicons error

我試圖從Bootstrap2升級到Bootstrap3。一切工作到目前爲止，除了Glyphicons：顯示一個正方形而不是圖標： enter image description here Twitter Bootstrap 3 Glyphicons error

我正在使用Symfony2。這是我怎麼稱呼引導CSS：

<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" />

這是我如何調用glyphicons：

<span class="glyphicon glyphicon-search"></span>

我的文件結構如下：

/網絡
- /css
  - bootstrap.css
- /字體
  - 4個glyphicons文件

看來，這是一個普遍的問題（見this topic，this topic或this topic爲例如），但沒有發現解決方案解決了我的問題。

我從bootstrap網站下載文件，而不是從定製程序中下載。此外，我做了以下文件結構的測試（在完全不同的文件夾，但具有相同的引導文件），對這些話題之一發現：

/測試
- /CSS
  - bootstrap.css
- /字體
  - 4個glyphicons文件
- 的index.html

的Index.html beeing：

<!DOCTYPE html> 
<html> 
<head> 
    <meta chaset="utf-8"> 
    <title>Test icons</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
</head> 
<body> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-star"></span> Star 
    </button> 
</body> 
</html>

而且這個測試完美的作品，所以glyphicons文件不會被損壞。

我的真實網站的字符集也是UTF-8。

我檢查了bootstrap。CSS文件和glyphicons參考似乎確定：

@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); 
} 

.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    -webkit-font-smoothing: antialiased; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -moz-osx-font-smoothing: grayscale; 
}

所以我想我稱之爲CSS「修改」，其路徑是從glyphicons路徑，這是圖標都沒有發現因此不同的方式。

我該如何調用CSS或修改src：url（'????????/glyphicons-halflings-regular.eot'）;有適當的聯繫？如果你直接訪問字體（yourhost.com/fonts/glyphicons-halflings-regular.woff）在security.yml

security: 
    firewalls: 
     assets: 
      pattern: ^/(_(profiler|wdt)|css|images|js|fonts)/ 
      security: false

來源

2014-01-16 Blacksad

檢查你已排除了什麼/字體路徑，會發生什麼？同時檢查螢火蟲或鉻檢查器的網絡選項卡中的錯誤。

來源

2014-01-16 09:49:21

在我增加了線條 'security.yml' 如你所說。我可以看到'yourhost.com/fonts/'的內容，但'yourhost.com/fonts/glyphicons-halflings-regular.woff'是403禁止的。螢火蟲說同樣的事情（403禁止在網絡/字體選項卡的字形... woff和字形... ttf）。我有一個WAMP系統，我檢查了文件權限，所有用戶對所有4個文件都有讀/寫/執行權限。但現在很清楚，問題在這個地區的某個地方！ – Blacksad

我以各種方式「搖動」了這些文件，並且我設法讓這件事情奏效......我相信問題是由於** 4個文件被加密**的事實。我刪除了，現在沒關係。感謝您讓我走上正軌。 – Blacksad

很高興我能幫到你 –

將您的字體目錄移動到css目錄中。
Bootstrap在該目錄中查找字體。
請求： ..yoursite/CSS /字體/ glyphicons，半身人，regular.woff例如

來源

2014-04-26 19:44:43

Twitter Bootstrap 3 Glyphicons error

回答

相關問題