I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.
I was having the same issue and couldn't find any information about it except in the hidden comments on this page. My font files were loading just fine according to Chrome, but the icons weren't displaying properly. I'm making this an answer so it will hopefully help others.
Something was wrong with the font files that I downloaded from Bootstrap 3's customizer tool. To get the correct fonts, go to the Bootstrap homepage and download the full .zip file. Extract the four font files from there to your fonts directory and everything should work.
Note to readers: be sure to read #user2261073's comment and #Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.
The font file isn't being loaded correctly. Check if the files are in their expected location.
#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');
}
As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:
In my case I was getting a 404 for glyphicons-halflings-regular.woff, and non visible glyphicons on mobile browsers.
Looks like there is some confusion about the MIME type for woff, more than one MIME type being accepted by different browsers, but the W3C says:
application/font-woff
Edit: After testing the following MIME type for woff works on all browsers currently:
application/x-font-woff
Edit: Latest version of Bootstrap at this time (3.3.5) uses .woff2 fonts with the same initial result as .woff, the W3C still defining the spec but at the moment the MIME type seems to be:
application/font-woff2
-If you followed the highest rated answer and it's still not working:
The Font folder MUST be on the same level as your CSS folder. Fixing the path in bootstrap.css will not work.
Bootstrap.css has to navigate to the Fonts folder exactly like this:
#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 the other solutions aren't working, you may want to try importing Glyphicons from an external source, rather than relying on Bootstrap to do everything for you. To do this:
You can either do this in HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Or CSS:
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")
Credit to edsiofi from this thread: Bootstrap 3 Glyphicons CDN
In case someone else ended up here and using Bootstrap >= v4.0: glyphicon support is dropped
The relevant part from the release notes:
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome
Source: https://v4-alpha.getbootstrap.com/migration/#components
If you want to use glyphicons you need to download it separately.
I personally tried Font Awesome and it is quite good. Adding icons is similar to glypicon way:
<i class="fas fa-chess"></i>
I was looking through this old question of mine and since what was supposed to be the correct answer up until now, was given by me in the comments, I think I also deserve the credit for it.
The problem lied in the fact that the glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. The ones that are working as they should are the ones that can be downloaded from the following link:
http://getbootstrap.com/getting-started/#download
Anyone having problems with old bad customizer files should overwrite the fonts from the link above.
You can add this line of code and done.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Thanks.
Azure Websites are missing woff MIME configuration. You must add following entry into web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
</configuration>
As #Stijn described, the default location in Bootstrap.css is incorrect when installing this package from Nuget.
Change this section to look like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('Content/fonts/glyphicons-halflings-regular.eot');
src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
IIS will not server .woff files by default, so in IIS you'll need to add a <mimeMap> entry to your web.config file;
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>
</system.webServer>
</configuration>
Do you have all below files in your fonts directory
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
I modified my less variables.less file
I modified the variable
#icon-font-path: "fonts/";
the original was
#icon-font-path: "../fonts/";
It was causing a problem
This is due to wrong coding in bootstrap.css and bootstrap.min.css. When you download Bootstrap 3.0 from the Customizer the following code is missing:
#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');
}
Since this is the main code for using Glyphicons, it won't work ofc...
Download the css-files from the full package and this code will be implemented.
This was the reason, why the icons didn't show up for me:
* {
arial, sans-serif !important;
}
After i have removed this part of my CSS, everything worked like it should. The !important was the one causing trouble.
Another problem/solution may be having this Bootstrap 2.x code:
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
and when migrating based on the guide (.icon-* ---> .glyphicon .glyphicon-*):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>
you forget to add the icon class (containing the font reference):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
Below is what fixed it for me. I was getting "bad URI" error using in Firebug console. The icons were showing up as E### numbers. I had to add a .htaccess file in my 'fonts' directory.
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Possible duplicate of: Downloadable font on firefox: bad URI or cross-site access not allowed
This is very much a long shoot, but it was my case and since it is not here already.
If you are compiling Twitter Bootstrap from SASS using gulp-sass or grunt-sass ie. node-sass. Make sure your node modules are up to date, especially if your are working on a rather old project.
It turns out that as of some time back the SASS directive #at-root is used in the definition of the #font-face in glyphicons, see https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss.
The gotcha here is that node-sass ie. libsass do not support the #at-root directive if it is too old. If this is the case you will get a #font-face wrapped in a #at-root which the browser have no idea what to do with. The result of this is that no font will be downloaded and you will likely see garbage instead of icons.
Note: below is likely a niche scenario, but I wanted to share it in case someone else might find it useful.
In a rails project, we are reusing quite a bit through a gem that is a Rails engine using bootstrap-sass. All was well in the main project with the exception of the glyphicon font path resolution.
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
We found that $bootstrap-sass-asset-helper was false during the resolution when we expected it to be true, so the path was different.
We caused the $bootstrap-sass-asset-helper to be initialized in the engine gem by doing:
// explicit sprockets import to get glyphicon font paths correct
#import 'bootstrap-sprockets';
#import "bootstrap/variables";
e.g. this caused the path to resolve to:
/assets/bootstrap/glyphicons-halflings-regular.woff
Again, this shouldn't be necessary in any normal rails project using bootstrap-sass, we just happen to be reusing a lot of views and this worked out for us. Hopefully this can assist someone else.
Here is what official documentation says regarding fonts not rendering.
Changing the icon font location
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
Change the #icon-font-path and/or #icon-font-name variables in the source Less files.
Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.
Other than that it could be that you missed to copy the fonts folder to the root directory
I had this problem and it was caused by the variables.less file. Overriding it to set the icon-font-path value solved the problem.
The file structured looks like this:
\Content
\Bootstrap
\Fonts
styles.less
variables.less
Adding my own variables.less file in the root of Content and referencing this in styles.less resolved the 404 error.
Variables.less contains:
#icon-font-path: "fonts/";
I got Bootstrap from NuGet. When I published my site the glyphs didn't work.
In my case I got it working by setting the Build Action for each of the font files to 'Content' and set them to 'Copy Always'.
i had a box width code \e094 for glyphicon-arrow-down, in fact i solved the problem adding glyphicon in css class like that :
<i class="glyphicon glyphicon-arrow-down"></i>
if it could help someone ...
Make sure you aren't over specifying the font family, for example
*{font-family: Verdana;}
will remove the halflings font from i elements.
I was having the same problem where the browser was unable to find the font files, and my issue was due to exclusions in my .htaccess file that was whitelisting files that shouldn't be sent to index.php for processing. As the font file couldn't be loaded the characters were replaced with BLOB.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
As you can see, files like images, rss, and xml are excluded from the rewrite, but the font files are .woff and .woff2 files, so these also needed adding to the whitelist.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
Adding woff and woff2 to the whitelist allows the font files to be loaded, and the glyphicons should then display properly.
You must to set by this order:
<link rel="stylesheet" href="path/bootstrap.min.css">
<style type="text/css">
#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'); }
</style>
What worked for me was replacing routes from:
#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');
}
to
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
This is how you include the icon in bootstrap 3
<span class="glyphicon glyphicon-bell"></span>
http://glyphicons.bootstrapcheatsheets.com/
Hope that helps.
#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');}
I am using bootstrap with namespace and glyphicons not working but after adding above line in code glyphicons working fine.
I just renamed the font from bootstrap.css using Ctrl+c, Ctrl+v and it worked.
Related
I was trying to add this font to the PDF's that was generated by HiQPDF
#font-face {font-family: "Helvetica Neue LT Std";
src: url("//db.onlinewebfonts.com/t/f0db0faa0f4af4630e2db0cd30400f2c.eot");
src: url("//db.onlinewebfonts.com/t/f0db0faa0f4af4630e2db0cd30400f2c.eot?#iefix") format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/f0db0faa0f4af4630e2db0cd30400f2c.woff2") format("woff2"),
url("//db.onlinewebfonts.com/t/f0db0faa0f4af4630e2db0cd30400f2c.woff") format("woff"),
url("//db.onlinewebfonts.com/t/f0db0faa0f4af4630e2db0cd30400f2c.ttf") format("truetype"),
url("//db.onlinewebfonts.com/t/f0db0faa0f4af4630e2db0cd30400f2c.svg#Helvetica Neue LT Std") format("svg"); }
Apparently it generates the PDF files without problem, but after i tried to open the PDF in Adobe Illustrator, AI catches a problem saying: "the document uses fonts that are currently unavailable on your computer" despite that i downloaded the fonts and installed in my pc.
I have used external urls because i am generating the pdfs from a server and not locally, so, i have those questions:
If I should upload the .ttf files to the server and from the server
copy paste the links.
If the problem is with this font for being very particular
If I change the code for the font-face.
I need help to solve this problem, thanks for considering my request
sorry for another wkhtmltopdf font topic.
I´m trying to convert a HTML page which uses a custom font by use of wkthmltopdf:
exec('/home/camelot/bin/wkhtmltopdf --orientation portrait --encoding utf-8 --page-size A4 --disable-smart-shrinking -T 0 -B 0 -L 0 -R 0 bill.html bill6.pdf ');
...
#font-face {
font-family: 'camelot';
src: url('gbcamweba-webfont.eot');
src: url('gbcamweba-webfont.eot?#iefix') format('embedded-opentype'),
url('gbcamweba-webfont.woff') format('woff'),
url('gbcamweba-webfont.ttf') format('truetype'),
url('gbcamweba-webfont.svg#camelotregular') format('svg');
font-weight: normal;
font-style: normal;
}
Unfortunately some characters are broken in resulting PDF:
I´ve recognized when only using the svg version of my custom font the shapes are rendered correctly but also the type gets converted to an image.
Does one know if I can use an SVG font without converting it to an image OR how to accomplish correct font rendering?
wkhtmltopdf 0.12.4
centos 6.9
tried as base64 encoded type
tried to install the fonts in centos
tried older versions 0.9 and 0.10 ...
This is how it solved it for me:
Use only OTF format no matter if the font gets installed in centos OR loaded by font-face. With otf the font is displayed correctly and stays type.
My question is about how to load Lobster font in my code on Codepen.io. Here is my HTML:
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
and CSS:
font-family: "Lobster", cursive;
Lobster font does not load and I'm unsure of what I'm doing wrong. The HTML is in the head section. No other fonts will load either.
I've added Bootstrap 3 to the CSS settings.
I'm running the Chromium browser in Ubuntu 16.04.
Thank you for all help and suggestions.
I am trying to load FontAwesome using SASS by #importing it using this line:
#import "../node_modules/font-awesome/scss/font-awesome";
and keep getting these errors in the console and not getting the FA icons to load:
olympos.min.js?ver=1.0:1 GET
http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff2?v=4.7.0
net::ERR_ABORTED (anonymous) # olympos.min.js?ver=1.0:1 (anonymous) #
olympos.min.js?ver=1.0:1 (anonymous) # olympos.min.js?ver=1.0:1
(index):1 GET
http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff?v=4.7.0
net::ERR_ABORTED
(index):1 GET
http://test.dev/wp-content/themes/fonts/fontawesome-webfont.ttf?v=4.7.0
net::ERR_ABORTED
I have tried following the original documentation on FontAwesomes website and results were similar - I have changed the file node_modules/font-awesome/scss/_variables.scss variable: $fa-font-path: "../fonts" !default; but noticed that it is pointing to the correct /fonts folder including the fonts.
Tried loading it from my gulpfile.js by adding font-awesome.scss to my sass task and not from within my projects scss _fonts.scss file.
this is my current local _fonts.scss file after a few variations:
#import "../node_modules/font-awesome/scss/font-awesome";
$fa-font-path: "../node_modules/font-awesome/fonts" !default;
#import "../node_modules/font-awesome/scss/font-awesome.scss";
#font-face {
font-family: 'FontAwesome';
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
After reviewing this post How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?
I get no proper result.
I came accross this post: "NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3
... mentioning it might be an Apache2 server fix (which I'm not quite sure where to add the code part... to my etc/apache2/sites-available/test.conf?)
I haven't tested this option yet, but the thing is - if this works locally on my localhost, this might be a problem to apply this change to my clients page (the production website is hosted on a server where I cant change anything in the apache configurations - due to a bad hosting company service).
Is there an other solution for this? Maybe adding this code part (or any other) to the .htaccess file?
What are the possible solutions for this case?
Using Ubuntu 16.04 - gulp - SASS - NPM
Feel free to request any more information that might help you help my and i will update my post
Why not just use the CDN for FontAwesome? You dont have to do any of that stuff. Just give them your email and they send the link to you.
Font Awesome cdn
I started using the asset_sync gem in order to use Amazon S3 as a CDN asset host (I am using Heroku and RoR). All of my assets are loading correctly, except for the icons I am using through Twitter Bootstrap (There is just a blank space where the icon should be).
I tried using Heroku's multiple asset pre-processor support:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "../img/glyphicons-halflings.png"%>);
I also tried moving the glyphicons-halflings.png directly into the images folder and referencing it there:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "/assets/glyphicons-halflings.png"%>);
app/assets/stylesheets/custom.css.scss
background-image: url("/assets/glyphicons-halflings.png");
However, I've haven't found a way to make it work. Any suggestions on how to get the Twitter Bootstrap icons to work successfully with S3/Heroku would be greatly appreciated.
EDIT: I am using: gem 'bootstrap-sass', '~> 2.0.2'
If you are using gem 'bootstrap-sass', the following is a solution that worked for me.
First, download bootstrap from the bootstrap website. Extract the two icon .png files (glyphicons-halflings.png and glyphicons-halflings-white.png) and copy them into your apps image directory (app/images).
In your custom.css.scss file (this could be a different name depending on your app) enter the following at the top of your stylesheet (before you import bootstrap) to override the icon image path:
$iconSpritePath: url('/assets/glyphicons-halflings.png');
$iconWhiteSpritePath: url('/assets/glyphicons-halflings-white.png');
#import "bootstrap";
Use the Rails image helper for example:
background-image: image-url("glyphicons-halflings.png");
You can also check your search path in the Rails console with:
Rails.application.config.assets.paths
Good luck!
Have you set your asset host?
https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration
Did you check the background-image URL that is actually used? I had the same behavior when I tried to test the CDN in my development enviroment. Turns out, somehow the wrong bucket was used in the application.css
For anyone not using the bootstrap-sass gem I finally got mine working by changing the default bootstrap css file extension to scss and editing the following piece of code to use the rails asset_url method. Just search for #font-face in the code and try this.
#font-face {
font-family: 'Glyphicons Halflings';
src: asset_url('glyphicons-halflings-regular.eot');
src: asset_url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset_url('glyphicons-halflings-regular.woff') format('woff'), asset_url('glyphicons-halflings-regular.ttf') format('truetype'), asset_url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Commit and push to heroku. Worked for me. Hope this helps someone