Menu
Font files are in the right place and html code is with charset utf-8.
Thats the code:
<!DOCTYPE html>
<html>
<head>
<meta chaset="utf-8">
<title>Teste icone</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 thats the file structure:
-css
*bootstrap.min.css
-fonts
*all font files here
*index.html
The strange is that when i look on debug all font files are loaded correctly
557
GLYPHICONS® are precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.
$("#lnkPopup"). prop("disabled", false); And if you want to dynamically disable it again, then just do: $("#lnkPopup").
To increase icon sizes relative to their container, use fa-xs , fa-sm , fa-lg (33% increase), or use literal sizes (to scale it from 1x to 10x) fa-2x , fa-3x , fa-4x , fa-5x , fa-6x , fa-7x , fa-8x , fa-9x , fa-10x .
Try re-downloading the fonts, may be corrupt.
Check the MD5
MD5 (glyphicons-halflings-regular.eot) = 2469ccfe446daa49d5c1446732d1436d
MD5 (glyphicons-halflings-regular.svg) = 3b31e1de93290779334c84c9b07c6eed
MD5 (glyphicons-halflings-regular.ttf) = aa9c7490c2fd52cb96c729753cc4f2d5
MD5 (glyphicons-halflings-regular.woff) = 7c4cbe928205c888831ba76548563ca3
Guys the issue was font files were corrupteds, the weird is that I've tried download bootstrap 3 times from differents devices and all of then I had the same issue. The most strange is that I research a lot for days and apparently nobody had the same issue. So.. thats it!
20
in your bootstrap.css try to add !important in .glyphicon font-family..
.glyphicon {
font-family:'Glyphicons Halflings' !important;
// more css comes along here
}
other css might cause conflict to change the glyphicons font-family.
7
This worked for me:
In bootstrap.css this is the link to the fonts. (Line 2386 or just search for face)
@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');
}
Removing the '..' before each link worked for me
e.g
@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');
}
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
