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.
Related
Thankyou for your precious time;
i'm a beginner in web development and as i was trying my hands on html and css
i found that the css styling isn't getting applied to the html and that the chrome
developer tools shows it to be empty (the file is present but the code that i've written in css file seems to be absent)
please help!
index.html file
<!DOCTYPE html>
<html>
<head>
<title>MY WEB PAGE </title>
<link type="text/css" href="style.css" rel="stylesheet" >
</head>
<body>
<h1>THIS IS MY WEB PAGE </h1>
<p>
css applied to this part of the code isnt being shown in the developers
tools
</p>
</body>
</html>
style.css file
body{
background-color:black;;
}
h1{
color:white;
font-style: italic;
font-family: sans-serif;
}
p{
font-family: serif;
color:yellow;
font-style: oblique;
}
You may be missing an angle bracket on your first line or it could be a copy-paste error. It should be: <!DOCTYPE html>
Also look in the Network tab in Chrome toolbar to make sure that it's able to find your style.css and it contains the right CSS.
Depending on how it's being hosted, you may have to hit Ctrl-F5 to tell the browser to download everything fresh instead of caching.
Clear the browser cache. It happens sometimes.
https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
you have to save css and html file in a same folder as your writed
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.
Interestingly I came across a web page where it has image ,but when I am able to see the source code I cant see its source, I mean the link to the actual image. since I am developing a webpage (beginner), I would like to know how to achieve. I am not sure whether its an image, or it is coming through CSS.
and the site below
https://www.debuggex.com/pricing
It's not an image but a character specified using CSS:
content: "\f023";
This is achieved using FontAwesome. You can apply classes to elements (in this case, icon-lock) and the styles are automatically applied using this third party open source thingy.
Because this is iconic font design it does not have image
If you like to include your project add css
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Then use class like this
<i class="fa fa-book fa-fw"></i> Library</li>
Refer
http://fortawesome.github.io/Font-Awesome/icons/
http://fortawesome.github.io/Font-Awesome/examples/
In this example it is not an image. The padlock is a font and circle around a style (CSS).
<span class="callout-pic"> <!-- Circle -->
<i class="icon-lock"></i> <!-- Padlock icon -->
</span>
generating image using the base64 encoding,
background: url(data:image/png;base64,.....)
Ref: http://base64img.com/#encode
#GrantThomas is right, Content use in css but basic use call to systems Symbol example Copyright Symbol, Percent Symbol, Left Right Arrow and more work etc. If you want to use this then you do not need any external resource in your page. Simply in your page call font which available in your system and right some code and if you want to some specific symbol then download font.
Example downloaded font :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>DingbatsOne Regular Specimen</title>
<style type="text/css">
#font-face {
font-family: 'dingbatsoneregular';
src: url('dingbat1-webfont.eot');
src: url('dingbat1-webfont.eot?#iefix') format('embedded-opentype'),
url('dingbat1-webfont.woff') format('woff'),
url('dingbat1-webfont.ttf') format('truetype'),
url('dingbat1-webfont.svg#dingbatsoneregular') format('svg');
font-weight: normal;
font-style: normal;
}
#target {font-family: 'dingbatsoneregular';}
#target:before {content: "A"; font-size: 200px;}
</style>
</head>
<body>
<div id="target"></div>
</body>
</html>
I am new in CSS and beginner but may be this is helpful to you.
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" />
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.