Hello I am trying to add the fonts from FontAwesome in order to use their icons and they require a root folder called Fonts.
I have tried to link it with
<link type="text/css" href="/myPath/font" />
The fonts from FontAwesome are declared in an #font-face rule in the css.
If you use the less or scss version, you can just override the path set in variables:
$fa-font-path: "path/to/your/fonts";
If you just use the css version, you should be able to redeclare the font-face rule (replace '../fonts/' by your path):
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just curious, how exactly do you know the fonts are not being pulled in? Is it because you are unable to create icons using font-awesome?
Aside from that, if you installed font-awesome with bower, npm or pulled from github it should have the following directory structure.
font-awesome
css
font-awesome.css
font
(font files / eot, svg, ttf, woff)
If it is in this directory structure then your css should point to those font files. Then it's just a matter of pulling in the font-awesome css like so:
<link rel="stylesheet" href="{{path}}/font-awesome/css/font-awesome.css" />
I would double check your directory structure for font-awesome and maybe try installing it via bower if nothing else.
I hope that helps.
As far as i am aware you have to add the link to the css file and the css file will link to the font folder which is preset by the font-awesome library. Therefore your code will contain the font-awesome.min.css file and you will need to have the font folder in the same directory,but the link will look in the html like this :
<link rel="stylesheet" type="text/css" href="font-awesome.min.css"/>
or using the cdn:
<link rel="stylesheet" type='text/css' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
Hope this helps !
use chrome browser,
Press F12 when and goto console tab
check details of errors and it will show the path browser is looking for FONTS,
just make sure that fonts are present on that path...
that's it...
Related
I won't be able to access internet on our hosting servers so I'm wondering if there's a way to download directly the font file instead of linking to the style sheet.
<style>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
</style>
Much appreciated.
Google Fonts has a "Download family" button atop each font page that provides a ZIP file with TTFs in each weight. Here's the page for Montserrat, the font used in your example: https://fonts.google.com/specimen/Montserrat
Using those files, you can set up your own local stylesheet that references the TTF files using #font-face rules, like the example below.
#font-face {
font-family: "Montserrat";
src: url("/fonts/Montserrat-Medium.ttf") format("ttf"),
}
Learn more, including how to assign different weights to variants like bold, at MDN and CSS-Tricks.
I want to use glyphicon glyphicon-info-sign
For this I am using below code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
And this is working for me.
When I copy CSS from above URL and create one bootstrap.min.css file in my Project inside css folder and use below code
<link rel="stylesheet" href="css/bootstrap.min.css"/>
But it's not working. I am getting below error on console
Please help me to fix this.
I am using AngularJS, Bootstrap v3.3.7.
Because you only copy CSS file and missing font files (in CDN, they use relative path to font folder)
You can download Bootstrap from http://getbootstrap.com/ and copy font folder to your project.
Or fix the path in CSS file by replace all ../fonts/ with full path https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/
The CSS file you copied from the CDN use relative paths for those resources you are getting errors. Do not copy dependencies from CDN-s directly. Try to get them through a dependency handler or add them as described in their documentation.
The bootstrap CSS you mentioned(non minified version) refers to few font files which looks 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');
}
Meaning you need to have these "font files" in a directory named fonts in the same level as your bootstrap css file.
Since you are using a minified version(.min.css), don't try to alter the path in your css file rather place the necessary font files in the location the css is looking for.
Everything in my web works well except #font face in the CSS file.
My web uses 2 fonts which neither of them can be loaded to display. One of them is fontawesome. I both tried to load the font from my server and the fontawesome server, but the result is the same.
I tried to view the page in IE Edge, Firefox and Chrome browser in PC and neither of them worked properly. However, when I tested in iPad Safari, it worked well.
Please be informed that all font files are accessible and my PC can view font in fontawesome.io perfectly. Please kindly advice what is wrong in my code.
Here is the code:
#font-face {
font-family: 'FontAwesome';
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here is the result in PC (Font Face is not load):
Here is the result in iPad (Font Face is load successfully):
From the png it's imposible to understand the problem. I can tell you to Read well this link you could found your solution.
If Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Using Sass or Less
Use this method to customize Font Awesome 4.7.0 using LESS or SASS.
Copy the font-awesome/ directory into your project.
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
#fa-font-path: "../font";
The font path is relative from your compiled CSS directory.
If your website runs via HTTPS protocol and you are trying to load external resources via HTTP - the loading will be blocked by browser.
Second, if the above is not the case - make sure you are loading the fonts with correct file path, for example:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
or use bootstrap CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
I am doing bootstrap validation using bootstrap.min.css for my website.I have done the validation,but font missing creates hurdle for me.I have added a screenshorts .Please suggest me why font is missing?
code in bootstrap.min.css
.glyphicon-ok:before {
content: "\e013"
}
.glyphicon-remove:before {
content: "\e014"
}
It is coming in firebug ,please check it.
I have tried a lot,but unable to fix it.
Thank you in advance.
Any suggestion will highly appreciate.
There are lots of unknown in your question,
What version of bootstrapvalidator and bootstrap you are using?
Did you included feedback icons in JS?
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
Are you loading the bootstrap.css or bootstrap.min.css from local server?
Are all font files exist and have correct names?
Is fonts folder path is correct?
Possible solution.
Mostly, This happens if font files missing or not loading correctly, folder name is wrong or font files path is wrong
#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');
}
load bootstrap.css from CDN Server,
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
if font icons shown, then in local bootstrap.css file check the font paths and folder name is correct and font files does exist and file names are correct.
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.
I'm currently making a webpage that imports the needed fonts from Google Fonts this way:
#import url(http://fonts.googleapis.com/css?family=Italianno);
The problem is that every time I load the page I need to be connected to the Internet and it also takes time to load the font. Is there any way I can load the font offline because while testing the page I'll be refreshing it countless number of times and I might not be connected to the internet all the time and I don't want to wait for 3-5 seconds every time for the font to be loaded.
I tried installing the font in the system and then using it in the CSS. It didn't work.
Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would load the font onto your app.
For this you just need to download the font and put that in fonts folder. (pre-requisite).Try using web safe fonts.
Hope it helps.
CSS
#font-face
{
font-family: 'Meiryo UI';
font-weight: normal;
font-style: normal;
src: url('../fonts/MeiryoUI.ttf');
}
1. create a folder in website directory and move your fonts
to it! ( .ttf , .eot , .woff )
example: directory --> webfonts
2. create a css document for that!
example: directory --> css --> webfont.css
3. use this code into webfonts.css
#font-face {
font-family: 'name';
font-style: normal;
font-weight: 400;
src: url('../webfonts/fontname.eot');
src: url('../webfonts/fontname.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fontname.woff2') format('woff2'),
url('../webfonts/fontname.woff') format('woff'),
url('../webfonts/fontname.ttf') format('truetype');
}
4. and in the first line of haed element into your webpage, use bellow code:
<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>
Use CSS3 #font-face. Try making font face of your fonts from any fontface generator like this http://www.fontsquirrel.com/tools/webfont-generator. And to learn how to use them take a look in here http://css-tricks.com/snippets/css/using-font-face/