I am migrating from bootstrap 2.3 to bootstrap 3 and everything works well. But when I tried to add some icons, the icon font doesn't displayed properly. I tried to look over here http://bootply.com/61521 and only '.glyphicon-envelope' was being displayed properly. Others have displayed like 'E001' and so on.
How can I be able to solve this problem?
For other browsers, glyphicons are displayed properly, only firefox was unables to display it properly.
Did you choose the customized version of Bootstrap? There is an issue that the font files included in the customized package are broken (see https://github.com/twbs/bootstrap/issues/9925). If you do not want to use the CDN, you have to download them manually and replace your own fonts with the downloaded ones:
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot
After that try a strong reload (CTRL + F5), hope it helps.
the icons and the css are now seperated out from bootstrap. here is a fiddle that is from another stackoverflow answer
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
http://jsfiddle.net/aQrPd/1/
Bootstrap 3 Glyphicons CDN
OK, my problem was not answered by the above. I had the fonts folder at the same location as the bootstrap css and js folders (eg /theme/bootstrap3/..), but it was looking for the font folder in the root (eg /fonts/glyph.. .woff)
The solution for me was to set the #icon-font-path variable to the correct relative path:
Eg #icon-font-path: "fonts/";
Here's the fix that worked for me. Firefox has a file origin policy that causes this. To fix do the following steps:
open about:config in firefox
Find security.fileuri.strict_origin_policy property and change it from ‘true’ to ‘false.’
Voial! you are good to go!
Details:
http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts
You will only see this issue when accessing a file using file:/// protocol
I had the same problem using a local apache server. This solved my problem:
http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons
For Amazon s3 you need to edit your CORS configuration:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
First of all, I try to install the glyphicons fonts by the "oficial" way, with the zip file. I could not do it.
This is my step-by-step solution:
Go to the web page of Bootstrap and then to the "Components"
section.
Open the browser console. In Chrome, Ctrl+Shift+C.
In section Resources, inside Frames/getbootstrap.com/Fonts you will
find the font that actually is running the glyphicons. It's
recommended to use the private mode to evade cache.
With URL of
the font file (right-click on the file showed on resources list),
copy it in a new tab, and press ENTER. This will download the font
file.
Copy another time the URL in a tab and change the font
extension to eot, ttf, svg or woff, ass you like.
However, for a more easy acces, this is the link of the woff file.
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
I ended up switching to Font-Awesome Icons. They are just as good if not better, and all you need to do is link in the font, happy days.
make sure the name of the folder that contains the font name is "fonts" not "font"
you can use tag like this:
<i class="fa fa-edit"></i>
Just in case :
For example, I just tryed <span class="icones glyphicon glyphicon-pen">
and after one hour i realized that this icon was not included in the bootstrap pack !! While the enveloppe icon was working fine..
Hope this helps
As others have noted, there are some issues with the customizer.
I was having troubles with the glyphicons not showing either, as well as issues with the navbar layout.
I used the suggestion and uploaded the fonts from the full zip/overwrote the ones from the customized version and that fixed the icons issues.
I also pulled in the CDN CSS and javascript instead of my local copy from the CDN. This fixed my navbar issues.
So I recommend until you get the hang of Bootstrap, not to use the customized version since you might get some frustrating, unwanted results.
For me placing my fonts folder as per location specified in bootstrap.css solved the problem
Mostly its fonts folder should be in parent directory of bootstrap.css file .
I faced this problem , and researching many answers , if anyone still in 2015 faces this problem then its either a CSS problem , or location mismatch for files .
The bug has already been solved by bootstrap
This is the official documentation supporting the above answers.
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 this one mistake the new users would do is, after downloading the bootstrap zip from the official website. They would tend to skip the fonts folder for copying in their dev setup. So missing fonts folder can also lead to this problem
Try using CDN
Try setting Access-Control-Allow-Origin HTTP Header
Related
I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes.
For example, this is the CSS class for the red error "X" on the error modal:
.anticon-cross-circle:before
{
content:"\E62E"
}
I'm not too familiar with the CSS content attribute so I went to www.w3schools.com and read up on it a bit and tested this particular content value on their Try It page for this attribute and I got the empty box that I got in my production environment.
Does anyone know what needs to be done to import these icons into my project so that they can be used offline?
Thanks
What I think is happening is that Ant Design is defining the CSS font definition with a URL to the corresponding font-file. Since the computers are offline, it cannot find those definitions.
In the documentation I see that they also provide SVG Icons, which should work completely offline. I think this is worth a try. The steps to implement this can be found here and it should be available from version 3.9.0: https://ant.design/components/icon/#SVG-icons
Have you tried downloading the icon library into your project folder?
https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react. Looks like they have assigned their own codes to their own icons so you'll need to have them offline.
You will nessd the css file tabler-icons.css and the woff file tabler-icons.woff and assign a font-family named tabler-icons within your style.css using #font-face
Somewhere in my site I have there folders:
(...)/font-awesome/5.0.6/css/
(...)/font-awesome/5.0.6/webfonts/
(...)/font-awesome/5.8.1/css/
(...)/font-awesome/5.8.1/webfonts/
If I include file font-awesome/5.0.6/css/fontawesome-all.min.css, Font Awesome works.
If I include file font-awesome/5.8.1/css/fontawesome.min.css, Font Awesome shows blank squares instead of icons.
It is most likely not due to cache as I've cleared the browser cache and .css cache files.
I remember that in the past, when integrating Font Awesome into a website, I was required to manually change some relative URLs inside the library, but that, if I remember well, was with Font Awesome 4.
I feel however like I'm missing some installation step. I just can't remember since it was "so long ago".
Do you download the .zip file instead of a single all.min.css file?
If not, then download the .zip file, unzip it, and link the main CSS file inside the header.
On the other hand, you can use the CDN link they provide:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Both work perfectly.
Considering the last release note there are some big changes done from 5.0 to 5.8:
Heads Up! This Release Has Breaking Changes
In a recent version, we fixed some issues with using our OTF and TTF font files on mobile projects. The naming, font weight, and version have been modified to be more compatible and stable going forward.
After upgrading your copies of our desktop files, you may need to set the typeface of your text layers again. After doing that, we also recommend double-checking that icons are showing up as expected in your documents. Running into trouble? Get in touch with us and we'll help you out.
You probably need to follow the links there in order to fix your issues:
Install the Ligature-based Font Files
I also advise you to upgrade slowly to a lower version because actually you are moving by the 7 version and it will difficult to know the real issue. So start moving to 5.1 then 5.2 and so on until you find which version is the culprit.
Releases · FortAwesome/Font-Awesome
Follow Upgrading Guide for more details about the upgrade between versions.
I found what the issue was. It's something that is specific to my site/application.
I minify most of my .css files using a PHP library then merge them using a homemade library (only the second library is homemade).
Then because, the resulting .css file isn't in the same locations. Links to webfonts get broken. That was the step I was forgetting: making all the relative ../webfont links semi-relative instead.
Everything works perfectly now.
The Font-Awesome docs do not mention anywhere that other files need to be downloaded and included within a project so why are the icons missing?
I know that the font files should be within the relative path so Font-Awesome can see them, I understand that, but with reference to other techniques like combining and minifying css files and JavaScripts, why is it that there will more HTTP requests to get the fonts?
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (fontawesome-webfont.woff, line 0)
You can see that they do state that you need to copy the entire directory onto your webserver.
http://fortawesome.github.io/Font-Awesome/get-started/
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
Copy the entire font-awesome directory into your project.
So just including the CSS file in your header isn't going to do much, because as others have pointed out.. it's a font. Think of it like Wingdings, so that's a font file.
Then the CSS basically sets the classes as background images, using the content but written using the font.
Minifying can cause some disruption to the paths of your CSS files. Basically, you need to make sure things are being referenced correctly. But firstly, ensure that the font files are on your webserver, and the CSS file of font-awesome is pointing to the correct path.
The entire point of Font Awesome is that it provides icons in form of a font file. Usually that font file is in the correct spot in the right directory next to the CSS files. The CSS files are referencing those font files (because they have to, somehow).
If you're picking that folder structure apart and are serving the CSS file from a different location then you'll also need to take care that the relative references to the font files don't break.
Follow the steps on their website.
Download here.
I've downloaded the font awesome css file and included it into my page, but the icons where displaying wrong. See
When I use the cnd version online, it works just fine.
What can be the problem here ?
You also need to upload the font files to your server and set the correct path in the font-awesome css file.
So Bootswatch.com has some awesome themes for twitter bootstrap. Unfortunately as soon as I swapped out the CSS scripts for Bootswatch.com the webpage loads super super slow. On my computer when i click preview or double click the .html file.
What is causing this to happen? its not even uploaded to the internet, this is all local. I cant understand why changing the CSS would make a difference. Not to mention the new CSS has fewer lines of code.
I had exactly the same problem.
The issue the the first line of the CSS where it tries to load from google fonts:
#import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
Simply delete or comment out this line so the file starts like this:
* Bootswatch v3.1.0
* Homepage: http://bootswatch.com
* Copyright 2012-2014 Thomas Park
* Licensed under MIT
* Based on Bootstrap
Late to the party but the URL is broken, put "http:" in front of the URL:
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
Did you download any image with the theme?
Maybe the CSS has external references for images.
If you didn't, try to load again your site with your firebug open in 'Network', so you can see whats making the load slow.
Some themes from any source often use code which is easy to customise but may not be the most efficient. Out of the box Bootstrap 2 has a max of 2 css files and 1 JS file (if you go with the combined file)
If I check the source code for the Bootswatch Amelia theme I see an extra 2 CSS files, an extra 2 JS files plus at least 2 Google fonts.
This maybe doesn't explain everything, though it wouldn't help for sure.
Good luck!
If a Bootswatch theme is loading slowly and you find the reason to be the referenced Google fonts, you can try to embed them into your application to make them available offline.
The latest Bootswatch versions (> 3.3.6.1) introduce a SASS variable $web-font-path that you can override and set to an empty value:
// use google fonts api offline
$web-font-path: '';
#import "fonts.yeti.offline";
#import "yeti/variables";
#import "yeti/bootswatch";
To serve the required fonts offline, I used https://google-webfonts-helper.herokuapp.com to generate the fonts.yeti.offline.scss file and to download the required font files. To switch between online and offline mode, you can toggle the first two lines in your code.