I am just getting started with Font Awesome and I must be doing something wrong with referencing files in the package. Icons are not showing up with <i class="icon-music"></i> for example.
The following is the default css except that I changed the file path to adhere my structure.
#font-face {
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
Relative path should be correct with all the font types inside Font folder and this folder sits on the same level with Contentfolder that has the stylesheet.
Is the query string appended to font names in the stylesheet for checking browsers? If so, what I done on html page with ie7 conditional comment should be invalid.
<link rel="stylesheet" media="all" href="#Url.Content("~/Content/font-awesome.css")" />
<!--[if IE 7]>
<link rel="stylesheet" media="all" href="#Url.Content("~/Content/font-awesome-ie7.css")" />
<![endif]-->
Should I remove the query string after the font names in the stylesheet and keep the ie7 conditional statement instead or vice versa? or is it something else that you see causing problem?
Your code for the html is not correct this is the right code
<link rel="stylesheet" media="all" href="~/Content/font-awesome.css" type="text/css" />
Related
I have downloaded the font-awesome library and linked it to my HTML. Here is the simplest version of my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
</head>
<body>
<div id="content">
<i id="search-icon" class="fa fa-search"></i>
</div>
</body>
</html>
But, what is rendered in the browser is:
What am I missing? I need to get this working in Firefox only.
I would try to set encoding of the page first, and then check if all other files are placed in correct directories as "Copy the entire font-awesome directory into your project" in get started page says.
Firstly, when you inspect your page and click on the font-awesome.min.css file, is it linked correctly.
Secondly are the font and supporting files that come with FontAwesome sitting in the correct folder (relative to your font-awesome.min.css file)?
For example, unless you altered the CSS in the files they gave you, you need to place the /font directory that comes with FontAwesome up a directory from your CSS files.
See the following as an example of how the CSS is referencing the font files.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Steps: Change your href to point to:
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Download the assets for FontAwesome: http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip
Move both the /css and /fonts folders directly next to your HTML file.
I've created a new (simple) website in IIS8. I've created a simple Index.html and put in jQuery, Bootstrap3 and Font-Awesome 4.0.0 to start playing with.
However my Font-Awesome icons show up as nothing (squares):
My folder structure is
/
- Index.html
- bootstrap.css
- bootstrap.js
- jquery-2.0.3.js
/css
- font-awesome.css
/fonts
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="slate.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
</head>
<body>
<div class="container">
<h1>This is a test</h1>
<h1>User Icon: <span class="fa-user"></span></h1>
</div>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</body>
</html>
Font-Awesome #font-face is:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Chrome shows that no .woff file (or anything) is even downloaded (no 404 either)
I've tried
IE 11, Firefox, Chrome
Putting the site on a live server
Changing MIME type of .woff to
font/x-woff
application/x-font-woff
application/font-woff
font/woff
Full read permissions to the App Pool
Changing the url() of the #font-face from ../fonts/ to fonts/
Removing all other unnecessary css and js files
Full page refreshes, clearing cache
I spent hours on this (too many to admit).
The problem is this code:
<span class="fa-user"></span>
Missing another fa in the class. It should be:
<span class="fa fa-user"></span>
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
import this on your font awesome CSS.
Just had the blank square issue, but this was not the problem with my markup. I'm using wordpress with a social comments plugin which used the same id as my fa icons were located within, and the plugin css overwrote the font-family. So, if your class is correct make sure no other class is highjacking your font-family.
Make sure your i elements have this css styling:
i {
font-family: FontAwesome;
}
Ive just fixed a similar problem - icons showing as squares - with the help of Mikes answer. Turns out I had another instance of FontAwesome being loaded and this was causing issues. When I apply the font family 'FontAwesome' instead of 'Font Awesome Free 5' this fixes the issue. Specifically my problem was encountered when running the WooCommerce Product Search with Avada Theme on Wordpress.
I have a font-face CSS:
<style>
#font-face {
font-family: 'museo_slab500';
src: url('/css/fonts/museo_slab_500-webfont.eot');
src: url('/css/fonts/museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/museo_slab_500-webfont.woff') format('woff'),
url('/css/fonts/museo_slab_500-webfont.ttf') format('truetype'),
url('/css/fonts/museo_slab_500-webfont.svg#museo_slab500') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Quite straightforward. The problem is:
If I keep this font-face definition alone in its .css file (and the font-family is applied to the various headings, body in another .css file) I don't see the font applied in any browser. I checked with firebug, everything is read, the font is downloaded but is not applied.
If I move the font-face definition from an external .css file and put it INLINE in the HTML everything shows correctly.
If I remove the above code from inline inside my page and put it in an external .css and put this instead of the style tags:
<link type="text/css" rel="stylesheet" href="/adminskin/default/css/font-families.css" />
. Any hint on why this happens? I'm going crazy.
Ok ..... I found the answer to this madness.
It seems that while Google Chrome has no problems at all, both IE and Firefox (didn't try Safari or Opera) can't cope with absolute url pointing to an external .css with a font face definition.
So while this works in all browser (inside the .css is just the font-face definition)
<link rel="stylesheet" type="text/css" href="/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />
This works ONLY in Google Chrome.
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />
Isn't this madness? I think it is.
So IE9 spits out an error on using a google fonts include like the following:
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />
IE9 spits out an error, even though the fonts still load fine:
CSS3111: #font-face encountered unknown error.
I'd gladly ignore this error if I weren't writing content that is iframed on other people's webpages. :(
Hosting the EOT files locally resolves the issue for IE:
< !--[if IE 9]>
< link rel="stylesheet" href="/survey/css/lato-ie.css" type="text/css" />
< ![endif]-->
And in that file..
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
src: url("/Lato-Reg-webfont.eot") format("embedded-opentype");
}
#font-face {
font-family: "Lato";
font-style: normal;
font-weight: 900;
src: url("/Lato-Bla-webfont.eot") format("embedded-opentype");
}
Include it in IE9, error's gone, works great.
Now my problem is, I need to include the google font stylesheet for everyone but IE9. For example, I can't do:
< !--[if !IE 9]>
< link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />
< ![endif]-->
Or firefox won't even see the damn include.
Are IE's devs conspiring to waste all of our time?
You were on the right track, you just need to use a downlevel-revealed conditional comment: it will hide it from IE but will be picked up by other browsers.
One question, are you trying to view your files locally?
The google fonts doesnt render locally, even thou they are linked to absolute outside links. (In case of IEs)
localhost/project/index.html = good
C:\Project\index.html = bad
I have been working on a site for about a week now and we needed to include some none-regular fonts.
No problem there, i would just use the #font-face{} in CSS and it works like a charm. . . unless your name is Internet Explorer.
as IE only takes .eot fonts (as the only one of all the major modern browsers) i need to include a way to use the .eot format of my fonts when it is a IE browser that hits the site.
so, this is where i could use a hand.
If I use the IE conditional HTML to specify a stylesheep just for IE, how can i make sure that the browser will interpred the right #font-familiy? (assuming i am going to be useing the same font-familiy name with a different src)
//Using this
#font-face {
font-family: "ArdleysHand";
src: url(../Fonts/ArdleysHand.ttf) format("truetype");
}
//But would have to use this if IE
#font-face {
font-family: "ArdleysHand";
src: url(../Fonts/ArdleysHand.eot) format("truetype");
}
Thanks in advance
Conditional comments for stylesheet
Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are
supported from IE 5 onwards.
<!--[if IE]>
<style type="text/css">
#import 'iestyle.css';
</style>
<![endif]-->
you can use conditional comments in your HTML file like:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie_font.css"> <![endif]-->
for all other browsers you can use this comment:
<!--[if !IE]> <link type="text/css" href="other_font.css"> <![endif]-->