It seems there is no documentation and I couldn't find any good solution/guide on Stackoverflow for this.
How and where should I add the Glyphicons folder to my project?
My app folder structure:
-quickstart-master
-app (*Here are my js anf html files*)
-node_modules
-bootstrap
-fonts
....
-index.html
As Bootstrap distribution files imply put it in a fonts folder on the same level as your js and css folders:
|
|--js_folder_name/bootstrap.js
|--css_folder_name/bootstrap.css
|--fonts/ <---- put all the glyphicons files here
|
You can edit the path in bootstrap.css if you want to change to a custom folder:
#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.woff2') format('woff2'), 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');
}
Related
Is there any way to add downloaded fonts in my child theme? .
Because I'm using google fonts and render-blocking JavaScript and CSS in above-the-fold content is my problem every time I test my site pagespeed insights
You have to unzip font downloaded by GoogleFonts
Place them in theme folder (eg: wp-content/themes/_MY_THEME_/fonts/)
Open your style.css file and add following code:
#font-face{
font-family: 'Font-Name';
src: url('fonts/Font-Name.eot');
src: local('☺'),
url('fonts/Font-Name.woff') format('woff'),
url('fonts/Font-Name.ttf') format('truetype'),
url('fonts/Font-Name.svg') format('svg');
font-weight: normal;
font-style: normal;
}
where "Font-Name" will be replaced by name of the font downloaded
I have been trying a lot lately to get Glyphicons to work but with no luck. I'm using JSF framework with the following file structure.
Also I modified the CSS in bootstrap.css by removing (..) from every path in the following CSS code to become 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.woff2') format('woff2'), 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');
}
When not removing (..), JSF will show the following 2 warnings:
Warning: JSF1091: No mime type could be found for file css/lib/fonts/glyphicons-halflings-regular.woff2. To resolve this, add a mime-type mapping to the applications web.xml.
Warning: JSF1064: Unable to find or serve resource, css/lib/fonts/glyphicons-halflings-regular.woff2.
But still always showing me a strange box instead of the Glyphicon that is supposed to show up?
Help please..
I found the solution by using the following expression to refer to the resources properly:
#font-face {
font-family: 'Glyphicons Halflings';
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}");
src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}") format('embedded-opentype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff2']}") format('woff2'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff']}") format('woff'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.svg']}") format('svg');
}
The problem is with the fonts folder.
Replace your fonts folder with the one at: https://github.com/twbs/bootstrap and it will work fine.
I am using a Wordpress Theme (Avada) which has fontawesome icons pre-installed. My customer wants to use lineicons from http://fontello.com/! He downloaded the .zip file and sent it to me. Here is what I did:
1) Unpacked -zip file and got the following files:
- css folder
- font folder
- config.json
- demo.html
- README.txt
2) I uploaded everything inside the CSS folder to: /wp-content/themes/Avada/css
3) I uploaded everything inside the font folder to: /wp-content/themes/Avada/fonts/fontello/
4) Now I opened up /wp-content/themes/Avada/css/fpslineicons.css and set the #font-face to the following paths:
#font-face {
font-family: 'fpslineicons';
src: url('../fonts/fontello/fpslineicons.eot?98281823');
src: url('../fonts/fontello/fpslineicons.eot?98281823#iefix') format('embedded-opentype'),
url('../fonts/fontello/fpslineicons.woff?98281823') format('woff'),
url('../fonts/fontello/fpslineicons.ttf?98281823') format('truetype'),
url('../fonts/fontello/fpslineicons.svg?98281823#fpslineicons') format('svg');
After that I went to my admin panel and enterd in text modus on my frontpage the following code:
<i class="icon-heart">Test</i>
I also tried:
<div class="icon-heart">Test</div>
Guess what? Nothing is displayed. Can someone tell me what I am doing wrong? I cannot find what is wrong.
Thanks,
Chris
have you tried setting explicitly the font-family for your <i> and <div> to fontello
div {font-family:'fontello'}
since you are already using another icon fonts library this can be the issue
Make sure the #font-face{font-family: "fontello";} and [class^="icon-"]:before, [class*=" icon-"]:before {font-family: "fontello";} are the same.
#font-face {
font-family: 'fontello';
src: url('../fonts/fontello/fpslineicons.eot?98281823');
src: url('../fonts/fontello/fpslineicons.eot?98281823#iefix') format('embedded-opentype'),
url('../fonts/fontello/fpslineicons.woff?98281823') format('woff'),
url('../fonts/fontello/fpslineicons.ttf?98281823') format('truetype'),
url('../fonts/fontello/fpslineicons.svg?98281823#fpslineicons') format('svg');
}
I am trying to get rid of the glyphicon errors in my Rails 4 project that's using Bootstrap 3. I'm not using any Bootstrap gems to add it to the asset pipeline. I manually added bootstrap.css and bootstrap.js to their respective app/assets directories and added them to application.css and application.js What I'm seeing now is the following in my web browser's console:
GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) localhost/:1
GET http://localhost:3000/fonts/glyphicons-halflings-regular.svg 404 (Not Found)
What can be done to fix this in a Ruby on Rails application? I tried copying said files to app/assets/fonts and popped this into application.rb:
config.assets.paths << "#{Rails}/app/assets/fonts"
No luck.
All solutions provided above are dirty hacks. The correct way to solve this issue is to include "bootstrap-sprockets" before bootstrap in your sass files:
#import "bootstrap-sprockets";
#import "bootstrap";
To get the glyphicons working I had to add a line to the config/application.rb file. Add the following within class Application < Rails::Application.
config.assets.paths << "#{Rails}/vendor/assets/fonts"
Then at the terminal run the command to get the assets to compile:
rake assets:precompile RAILS_ENV=development
Now we need to update the bootrap.css file (you’ll likely need to update the bootstrap.min.css file as a result, too), search for #font-face with your text editor and update the paths to the font urls to include /assets/glyphicons-halfings-regular.* (include the file extension).
This is what the url’s will be originally in the bootstrap.css file.
#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');
}
You want to change each of these resource locations to /assets/glyphicons-halfings-regular.* as shown below.
#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/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
SOURCE: [Erik Minkel Blog]
Basically you should just import bootstrap
#import "bootstrap-sprockets";
#import "bootstrap";
Problems appear when you import bootstrap components before #import "bootstrap-sprockets";
Overrides should go after #import "bootstrap-sprockets";
// bootstrap-sprockets goes first
#import "bootstrap-sprockets";
// Overrides
#import "bootstrap/variables"; // it uses $bootstrap-sass-asset-helper which is defined in bootstrap-sprockets
$btn-primary-bg: $gray-light;
#import "bootstrap";
Add the woff, ttf and svg files to:
RAILS_ROOT/vendor/assets/fonts
Create this if it doesn't exist. They should be present in the build of bootstrap you downloaded.
Also, you'll need to add this to your application.css after all your require statements:
#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/glyphicons-halflings-regular.woff') format('woff'), url('../assets/glyphicons-halflings-regular.ttf') format('truetype'), url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Moving the fonts to the /app/public folder worked but didn't seem like the Rails way.
What worked for me was putting them in /app/assets/fonts and commenting this out in bootstrap.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.woff2') format('woff2'), 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');
}
*/
After adding these lines into my style.css file I don't get the expected return in frontend / browser. I get a preprocessed version of the css file wich contains resources:/ before the font path. I don't want this preprocessing. How can I deactivate it? I think it's the resources plugin which does this.
I'm using Grails 2.2.
CSS:
#font-face{
font-family:'FontAwesome';
src:url('../font/fontawesome-webfont.eot?v=3.0.1');
src:url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight:normal;
font-style:normal }
Output:
#font-face{
font-family:'FontAwesome';
src:url('resource:/font/fontawesome-webfont.eot?v=3.0.1');
src:url('resource:/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('resource:/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('resource:/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight:normal;
font-style:normal }
I want to exclude only one css file from the preprocessing. Not all css files.