i am using font-awesome icons for publishing my HTML,CSS templates. They are working fine when i have the live link but when i download the CSS file and include that in my pages icon disappears.
Live Path : <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Local Path : <link href="css/font-awesome.css" rel="stylesheet">
How can i use the font awesome in offline mode?
Did you embed FontAwesome font into your project?
your structure must be like this:
[+]assets
[+]css
font-awesome.css
[+]js
demo-file.js
[+]fonts
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
index.html
sample.html
whatever.html
after that, you can use FontAwesome locally.
You also need to download the fonts themselves as well...It is a font, like any other...So, go to fontawesome website, follow the instructions and download css + fonts :)
Could be a pathname problem Try:
<link href="./css/font-awesome.css" rel="stylesheet">
I think you didn't download fonts or you used the wrong path.
You can download the latest version font awesome at https://fontawesome.com/download.
And don't forget check your path!
Hope this helps.
In my case: If you have added something like this in your html (or any other font family with important using * selector), then this might be the cause your icons are not showing..
*{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
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’m trying to implement some animated social media icons on my site with pure CSS and no JS. The pen I found that am trying to adapt is called "Yet Another Set of Animated Social Icons".
The problem is, rectangle glyphs are showing instead of the correct social media icons in my web browser locally and remotely. The icons appear properly in the original codepen. But somewhere along the way in my implementation on my web server or in my web browser, I am importing the web fonts incorrectly.
Here is what it looks like locally in my web browser.
So you can see it yourselves, here it is on my web-server: https://angeles4four.info/
The author of the original codepen uses external style sheets and preprocessors. I’ve done my best to include these imported in my HTML and CSS. See below.
In my head tags in my index.html is this:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
In my css file is this:
#charset "UTF-8";
#font-face {
font-family: 'icomoon';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?3qkin2");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?#iefix3qkin2") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.woff?3qkin2") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.ttf?3qkin2") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.svg?3qkin2#icomoon") format("svg");
font-weight: normal;
font-style: normal;
Is this set up correctly? What am I missing? I'm trying to get my social media icons to render properly (as they appear in the original pen) instead of empty rectangle glyphs.
you forgot add
https:
try this
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
To recap how I got this working, I made two changes:
Courtesy of Hossam Elmasrey, I added https: to one of the link elements in index.html.
Turns out I was missing local system fonts. So with Manjaro being my local O/S, I invoked: sudo pacman -Ss ttf-liberation. I’m not sure when, how, or why these fonts were missing, but Liberation fonts are installed now.
Then I restarted my browser. When accessing my remote website through Firefox and Chrome, all the icons load properly. Hooray! But loading index.html from Chrome and Firefox directly from my local file tree doesn’t work - - which Connum explained is because web browsers disable some content from loading externally for security reasons. Going forward I will use a local testing server.
Thank you both for your help.
I have setup a website with GitHub Pages using Jekyll and I host the stylesheet for the Roboto font (using Google would increase page load time). I then import it in my html as
<link rel='stylesheet' href='{{ site.baseurl }}/static/css/roboto.css'>
site.baseurl is an empty string, so no issues with it.
In my CSS file, I use
body {
font-family: 'Roboto', sans-serif;
}
but it doesn't work. The font is not being rendered on screen. What is happening and is there a way to fix it?
After some investigation, I realized the font files I was hosting didn't include the Roboto font. I downloaded the correct files and replaced them, and now it works like a charm.
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...
Is there an easy way to display webpages in computer modern font?
The easiest and most stable way to do this I found was to base64 a font I found at http://mirrors.concertpass.com/tex-archive/fonts/cm-unicode/fonts/otf/. I used the cmunrm.otf from there, base64'ed it and put it as a font face in my css.
#font-face {
font-family: "my-font";
src: url(data:font/truetype;charset=utf-8;base64,T1R...gP5w/kP+RAA format("opentype");
}
body {
font-family: "my-font";
}
You can see an example at https://jsfiddle.net/jtvx9auo/
While you could also simply download the otf file and put it to your server, I found base64ing to be more reliable, e.g. when trying to convert to pdf using wkhtmltopdf.
In case anyone still stumbles upon this (2020+) looking for the optimised web fonts rather than the larger .otf fonts which are used in the answer above, I've hosted the Computer Modern font family via the jsDelivr CDN.
To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:
https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css
And then just add the Computer Modern Serif or sans-serif families directly in your css files.
Example Code:
<head>
<!-- Other imports... -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css">
<style>
body {
font-family: "Computer Modern Serif", serif;
}
</style>
</head>
Check out the full documentation here