#font-face AwesomeFont doesn't work - html

I've been looking through Search Q&A before asking my question but I didn't find any answers.
For my project I have to make a website, they gave me a folder "fonts" to download containing the fonts I need, I have 2 fonts, 'FontAwesome' and 'glyphicons-halflings' here's the code I wrote for these fonts:
#font-face
{
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot');
src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff') format('woff'),
url('fonts/fontawesome-webfont.ttf') format('truetype'),
url('fonts/fontawesome-webfont.svg#FontAwesome-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face
{
font-family: 'glyphicons-halflings-regular';
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-halflings-regular') format('svg');
font-weight: normal;
font-style: normal;
}
then I tried to use my fonts:
header h1
{
font-family: 'FontAwesome';
}
When I tried to use FontAwesome, nothing changed the basic fonts remain, I also tried to use my second fonts 'glyphicons-halflings-regular' and with this fonts the basic fonts remain but there's more space between my words like this.
Here's a screenshot of my fonts folder, my stylesheet is in my folder 1-Projet so normally there's no problem for the URL, I also tried with someone to use the fonts with google link, but it didn't work.
Does anyone know where the problem come from?

I would consider including font-awesome using library using CDN
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Then add your own CSS class something like .fa that just has font-family:FontAwesome
.fa {
font-family: FontAwesome;
}
then on your element you could add the font-awesome class for the particular icon you want e.g
<h1 class="fa fa-check fa tick"></h1>
Below is how we have implemented with extra CSS for our .fa class
But could have just like below
Font Awesome Icons displayed with HTML Code
== edit: example HTML for simple font awesome page, sopy below and save as a .html file and see if works for you as a starting point ==
<!doctype html>
<!--[if lte IE 8]> <html lang="en" class="ie-lte8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
font-family: "FontAwesome";
}
</style>
</head>
<body>
<h1 class="fa fa fa-check fa-tick">This is font awesome</h1>
</body>
</html>

thank you for your answer,
i made a mistake on my post i said i used google link with my friend but it was this bootstrap link i used and it still didn't work, i also tried to use this class as you said and it didn't work, even though, when i inspect my page font-family: 'FontAwesome'; appear, i also tried font-family: FontAwesome as you said to make sure if there's no miracle lol,
i also tried to use the font on something else than my h1 but it still didn't work
edit i tried your html code and i could see the icon appearing before the font, but it seems that the font still doesn't work

Related

Why is my custom font not displayed (HTML, CSS, BEGINNER)

<html>
<head>
<title>innomotion media</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Baiti";
src: url(fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
</style>
</head>
<body>
This is Baiti
</body>
</html>
As a long time coder, I have always dodged HTML or CSS. But it is time I need a webpage. Basic syntax is clear to me, however I already stumbled across using my custom font.
The html file is located on my drive. Next to it is a local folder called "fonts". I thought I had referenced that folder correctly and by opening the webpage, the font "Baiti" is used.
But it isnt. It displayed some def. times new roman or something.
What is it I am doing wrong?
<html>
<head>
<title>innomotion media</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Baiti";
src: url(fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
</style>
</head>
<body>
This is Baiti
</body>
</html>
src: url("./fonts/baiti.ttf");
Also make sure that the Font Family matches the name when you preview the font. and also the type if you are using woff or woff2
like,
src: url("./fonts/baiti.woff");
src: url("./fonts/baiti.woff2");

CSS internal links not relative to css file?

I must be missing something, are css internal file links relative to the css file? searching and every source so far says yes but my file doesn't seem to want to load the fonts (fontawesome). The index.html file loads and displays the fonts corectly so i know it's working; however, the myfile.html page that loads the css relative doesn't work. In order for the myfile.html to work i have to change the css file to load relative to the myfile.html page (or so it seems) so ../fonts/ but then that breaks the index.html page.
Because of the way things are hosted and done i have to keep eveything relative or i would just use /fonts/ but that's not an option at the moment.
Also to keep it shorter I'm just listing the parts of fontawesome needed for the example listed
probably missing something simple but all the reference i pull up says it should load relative to the .css file.
here is the folder/file structure
- home
- inc
myfile.html
- fontawesome
fontawesome.min.css
- fonts
index.html
---- index.html ----
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="fontawesome/fontawesome.min.css" rel="stylesheet" type="text/css">
<title>Home Page</title>
</head>
<body>
<div><i class="fas fa-bars"></i> fun stuff here</div>
</body>
</html>
---- myfile.html ----
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../fontawesome/fontawesome.min.css" rel="stylesheet" type="text/css">
<title>myfile</title>
</head>
<body>
<div><i class="fas fa-bars"></i> fun stuff here</div>
</body>
</html>
---- fontawesome.min.css ----
.fa,.fab,.fal,.far,.fas{
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
display:inline-block;
font-style:normal;
font-variant:normal;
text-rendering:auto;
line-height:1
}
.fas.fa-pull-left{
margin-right:.3em
}
.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{
margin-left:.3em
}
#font-face{
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:400;
src:url(fonts/fa-regular-400.eot);
src:url(fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
url(fonts/fa-regular-400.woff2) format("woff2"),
url(fonts/fa-regular-400.woff) format("woff"),
url(fonts/fa-regular-400.ttf) format("truetype"),
url(fonts/fa-regular-400.svg#fontawesome) format("svg")
}
#font-face{
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:900;
src:url(fonts/fa-solid-900.eot);
src:url(fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
url(fonts/fa-solid-900.woff2) format("woff2"),
url(fonts/fa-solid-900.woff) format("woff"),
url(fonts/fa-solid-900.ttf) format("truetype"),
url(fonts/fa-solid-900.svg#fontawesome) format("svg")}
.fa,.far,.fas{
font-family:"Font Awesome 5 Free"
}
.fa,.fas{
font-weight:900
}
I'm just shooting from the hip at this point. :-) Try editing the paths in your fontawesome.min.css. Just add ../ to each URL like so:
#font-face{
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:400;
src:url(../fonts/fa-regular-400.eot);
src:url(../fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
url(../fonts/fa-regular-400.woff2) format("woff2"),
url(../fonts/fa-regular-400.woff) format("woff"),
url(../fonts/fa-regular-400.ttf) format("truetype"),
url(../fonts/fa-regular-400.svg#fontawesome) format("svg")
}
#font-face{
font-family:"Font Awesome 5 Free";
font-style:normal;
font-weight:900;
src:url(../fonts/fa-solid-900.eot);
src:url(../fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
url(../fonts/fa-solid-900.woff2) format("woff2"),
url(../fonts/fa-solid-900.woff) format("woff"),
url(../fonts/fa-solid-900.ttf) format("truetype"),
url(../fonts/fa-solid-900.svg#fontawesome) format("svg")}

Font Awesome icon not display on IE compatibility view

I have used Font Awesome icon in my project. The HTML page generate from XSL Template as follows-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="IE=9; IE=EDGE" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css?ver=T1.0" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css?ver=T1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css?ver=T1.0" />
<link rel="SHORTCUT ICON" href="images/favicon.ico" />
</head>
<body>
</body>
After searching on stackoverflow I added meta tag in head to render document mode to latest available version. Even my base FONT (Lato) also not load and Still Font Awesome icon disappear in my page In IE (IE9 & IE11) compatibility mode.
Please suggest, what I am missing?
regards,
Here is my style.css -
#font-face{
font-family: 'Lato';
src: url('../fonts/lato-v11-latin-regular.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: normal;
src: url('../fonts/lato-v11-latin-regular.eot');
src: local('Lato Regular'), local('Lato-Regular'),
url('../fonts/lato-v11-latin-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/lato-v11-latin-regular.woff2') format('woff2'),
url('../fonts/lato-v11-latin-regular.woff') format('woff'),
url('../fonts/lato-v11-latin-regular.ttf') format('truetype'),
url('../fonts/lato-v11-latin-regular.svg#Lato') format('svg');
}
In other browser Chrome, FireFox and IE9 & IE11 (Normal Mode) working fine.
Another think is - if install font fontawesome-webfont.ttf in sytem through control panel (windows) then its working fine.
As suggest some website I have added Font Face twice.
Here you can try to use this code <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> from this article
Update1
Here might be the issue to be referenced.
As suggested by the font awesome members
"This still fails on IE9 when the font doesn't have full "Installable" permissions. Only solution seems to be to edit the font permissions or serve it from the local server."
One more thread which might be able to help

Search icon does not show magnifying glass in Internet Explorer

The search icon (green square on the far right of the top menu) of my website does not show the magnifying glass in Internet Explorer, whereas it does appear in other browsers such as FireFox and Chrome.
See the following link:
www.robvanderstaaij.nl
Any suggestions to solve this would be very welcome.
Add this code to just before your </body> tag.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</body>
Or you might have missed out:
<link rel="stylesheet" media="all" href="assets/css/your-icons.css" />
<!--[if IE 7]>
<link rel="stylesheet" media="all" href="assets/css/your-icons-ie7.min.css" />
<![endif]-->
Here is the CSS code that generates your font:
#font-face {
font-family: 'Genericons';
src: url('font/genericons-regular-webfont.eot');
}
#font-face {
font-family: 'Genericons';
src: url(data:application/font-woff;charset=utf-8;base64,--REDACTED--) format('woff'),
url('font/genericons-regular-webfont.ttf') format('truetype'),
url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}
IE8 and older only support EOT, however that font isn't defined. The second #font-face overwrites the first completely.
Try moving the .eot src property to be just before the really long one, and delete the first #font-face block.

Write a Unicode scribal character in an HTML page (with Junicode)?

This is hopefully a very simple question, but one a lot of Googling has not found the answer to!
I would like to display a Unicode character from the Latin Extended-D set on a web page (PDF description of Extended-D), using Junicode, which supports Extended-D.
The code I would like to display is "A760 LATIN CAPITAL LETTER VY".
This is my page in full:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Font Experiments</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body id="home">
ῦ
&#A760;
</body></html>
And this is what my stylesheet looks like:
#font-face {
font-family: 'Junicode';
src: url('../fonts/junicode-regular-webfont.eot');
src: url('../fonts/junicode-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Junicode.woff') format('woff'),
url('../fonts/Junicode.ttf') format('truetype'),
url('../fonts/junicode-regular-webfont.svg#JunicodeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: junicode, gentium, caslon roman, serif;
}
I have checked and Junicode is being loaded correctly. But while the first Unicode character displays correctly as ῦ, for the second character I just see a literal &#A760 on the page.
How can I indicate that this should be displayed as Unicode Extended-D character A760?
I think you have to change to hexadecimal:
Ꝡ