Menu
This is undoubtedly me doing something really dumb, but I can't see it. I'm trying to use FontAwesome as a font-family in my css, but it doesn't seem to be working.
With minimal code, I have:
<head>
<link href="assets/css/font-awesome.css" rel="stylesheet">
<style>
body {
font-family: FontAwesome;
}
</style>
</head>
<body>
Test FontAwesome!
</body>
This is showing up as clearly Times New Roman.
The FontAwesome font itself is stored in assets/font/, and font-awesome.css has the following @font-face defined:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.0.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
Changing the .. to assets gives an obvious error that it can't find the font, so I'm pretty sure the relative pathing is just fine and dandy. If I change it to font-family: FontAwesome,Arial;, it uses Arial. Clearly, it can't find FontAwesome and I don't know why.
Any particular reason why I'm not able to change my body font to FontAwesome?
467
Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0. 0).
fas class will only work with font-weight: 900 . make sure you have font-weight: 900 . you are using multiple classes fas fa-github btn btn-dark btn-lg if any of these does not have font-weight: 900 font will not show up.
getPropertyValue(property); } if (css(span, 'font-family') === 'FontAwesome') { message. innerHTML += 'Yay, Font Awesome loaded!
Much better is use this:
<head>
<!-- fonts awesome -->
<link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
</head>
In your stylesheet use only for example:
#post-title a:before {
font-family: FontAwesome;
content: "\f0c4";
}
No less, no more :))))
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
