I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?
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 would like to use Glyphicons Pro (Social and Filetypes as well). But bootstrap has a different way for icons.
In bootstrap: glyphicon glyphicon-ok
In glyphicon: glyphicon ok
IMHO the last option is better.
My question is: how can I use glyphicons pro in bootstrap, as the glyphicon class is already reserved by halflings.
My ideas:
remove halflings from bootstrap, and use the one provided by glyphicon
integrate the pro icons into bootstrap, but the mentioned question needs to be answered first
There are many similar questions on stackoverflow, and they are either about replacing halflings or not properly answered.
You should compile a Bootstrap version without the gylphicons component here.
Just uncheck Glyphicons under components, then go to the bottom and click "Compile and download".
After that you can include Glyphicons Pro without conflict in class names.
The following approach worked for me as of Bootstrap 3.3.6:
Download and extract Bootstrap source locally.
you#home:~$ mkdir bs3_src && cd bs3_src/
you#home:~bs3_src/$ git clone https://github.com/twbs/bootstrap.git .
Extract Glyphicons Pro package and navigate to the "Glyphicons Regular" family glyphicons.less file under (src)/glyphicons_pro/glyphicons/web/html_css/less. Replace bootstrap/less/glyphicons.less with this one. Replace all of the halfling font files with their glyphicons-regular.* counterparts from the PRO source into bootstrap/fonts/. If you desire the .social and .filetype fonts, add glyphicons-filetypes.less and glyphicons-social.lessfrom their respective subfolders into bootstrap/less/ (don't forget to push their font files to bootstrap/fonts/ as well).
Open bootstrap/less/bootstrap.less for editing. You are looking for the early import declarations:
...
#import "glyphicons.less";
// Extras go here:
#import "glyphicons-filetypes.less";
#import "glyphicons-social.less";
...
Install node/npm and grunt if you haven't done so yet as per Bootstrap's "Getting Started" section's instructions. Proceed:
you#home:~/bs3_src$ npm install
you#home:~/bs3_src$ grunt dist
By now your bootstrap/dist/ folder should have a glorious set of combined *.css, *.min.css and *.map files with the appropriate font families, along with all of the other PRO add-on goodies. Copy it's sub-folders into your project's assets and link accordingly.
The good thing about this approach is that it can be automated as a workflow (check this related post) to incorporate periodic updates from Bootstrap or Glyphicons, not to mention any custom .less that needs to be compiled.
As far as overriding the class schemes, i.e. "glyphicons glyphicons-ok" => "gi gi-ok": Any regex or repl type operation on the source less files before compiling would quickly achieve this. You'll simply have to be vigilant to make sure any of your other third-party apps aren't affected adversely.
I am trying to include Zurb Icon Fonts 3 into my Moovweb project. First off, is it supported? Second, what do I have to do to get them to work. I have tried a few different combinations of importing them, but each time it brings up a blank local host page.
Thank you in advance.
One way to do this is to create a fonts folder under the assets/images folder where you would place the foundation fonts.
Then you would include the foundation-icons.scss file in the stylesheets folder, but rename it so it's a partial: _foundation-icons.scss
Edit the references in _foundation-icons.scss so they point to image-url("fonts/foundation-icons.ttf"), etc.
Then you can #import "_foundation-icons.scss"; so the styles get compiled in your main stylesheet.
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