Menu
I'm trying to upgrade from Bootstrap2 to Bootstrap3. Everything works so far, except the Glyphicons: a square is displayed instead of the icon: 
I'm using Symfony2. This is how I call Bootstrap CSS:
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" type="text/css" />
This is how I call the glyphicons:
<span class="glyphicon glyphicon-search"></span>
My file structure is as follows:
It seems that this is a common problem (see this topic, this topic or this topic for example), but none of the solution found there solved my problem.
I downloaded the files from bootstrap website, not from the customizer. Moreover, I made a test with the following file structure (in a complete different folder but with the same Bootstrap files), found on one of those topics:
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>
And this test works perfectly, so the glyphicons files are not corrupted.
The charset of my real site is UTF-8 as well.
I checked the bootstrap.css file and the glyphicons reference seems OK:
@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;
}
So I guess the way I call the CSS "modifies" its path which is consequently different from the glyphicons path, which is the icons are not found.
How should I call the CSS or modify the src: url('????????/glyphicons-halflings-regular.eot'); to have the proper link?
304
Check what you have exluded /fonts path in security.yml
security:
firewalls:
assets:
pattern: ^/(_(profiler|wdt)|css|images|js|fonts)/
security: false
What happens if you directly access font(yourhost.com/fonts/glyphicons-halflings-regular.woff)? Also check firebug or chrome inspector for errors in network tab.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
