I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my code:
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>
I would like to know how to make the icon display instead of the bordered square box.
In my case i made the following mistake in my css code.
*{
font-family: 'Open Sans', sans-serif !important;
}
This will override all font family rules for the entire page.
My solution was to move the code to body like so.
body{
font-family: 'Open Sans', sans-serif;
}
NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.
When you open font-awesome.min.css you can see following path:
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
It means that you have to create directory Fonts and then copy files fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) to this folder. After that everything should work fine.
Be aware that the new version (5) of font awesome uses "fas" or "fab" instead of "fa" prefix.
Quoted from their website:
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
This is why my fonts were showing blank squares. Now fixed.
Example code:
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>
See: https://fontawesome.com/icons/facebook-f?style=brands
First, check that you have class="fa" as well as whatever the icon's class is. So, not just
<i class="fa-pencil" title="Edit"></i>
But also
<i class="fa fa-pencil" title="Edit"></i>
Then it works as expected. This solved my issue.
Open your font-awesome.css
theres code like :
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
you must have folder like :
font awesome -> css
-> fonts
or the easiest way :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
i was dealing with the same problem then i figured it out i have to use new version (5 and plus)
use this cdn it will work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
Check that the path to your CSS file is correct. Rather prefer absolute links, they are easier to understand since we know where we start from and search engines will also prefer them over relative links. And to reduce bandwidth rather use the link from font-awesome servers:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
Moreover if you use it, there will be no need of uploading extra fonts to your server and you will be sure that you point to the right CSS file, and you will also benefit from the latest updates instantly.
I'm using FontAwesome Pro, and the solution for me was to embed all.min.css instead of fontawesome.min.css.
i was facing the same issue..
so instead of downloading font awesome , i added a link in my html code and it worked.
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
It's something to do with v5, some of the icons don't work with older versions.
This link worked for me!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
For a start, you shouldn't have both font-awesome.css and font-awesome.min.css
Generally, use font-awesome.css during development, then switch to font-awesome.min.css once you're happy with the site.
Problems like this are often caused by relative paths and locations, so check where your html file is in relation to the css.
If your html file is in the base directory, and the css in a subfolder off the root, you would need:
href="./css/font-awesome.css" (single period)
All the above are correct however on top of that my issue was that I downloaded the free version of FA5 which doesn't have:
font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')
I could not get v5 to work so I reverted to 4.7.0 with the help of the posts above and it fixed my issue.
For those of you using SCSS and the NPM package, here is my solution:
npm i --save #fortawesome/fontawesome-free
Then at the top of an SCSS file (ideally an SCSS file imported at the root of your application):
#import '#fortawesome/fontawesome-free/css/fontawesome.css';
#import '#fortawesome/fontawesome-free/css/all.css';
In my case, I needed to combine the answers from sst & Bruno Leveque:
https://fontawesome.com/download
download via Free for web, unpack
copy all folders into /fontawesome/
link the all.min.css instead of fontawesome.css
Example Django:
# in myapplication/vendor/fontawesome/ everything unpacked
<link rel="stylesheet" href="{% static 'myapplication/vendor/fontawesome/css/all.min.css' %}">
I successfully installed Font Awesome using their CDN and javascript include (as described on this page). Then I tried to copy the HTML and CSS to some legacy pages and suddenly I saw empty square boxes instead of the icons.
I saw Daniel's answer (above) and because my legacy CSS file was huge (and years old) I suspected that was the issue. However when I looked in Chrome DevTools it really looked like Font Awesome was loaded:
I was expecting to see the font in strikeout if there was an issue... However I had really exhausted all my options so I checked the Computed Styles and saw clearly that the Font Awesome font was definitely not being used. (See the Rendered font at the bottom)
My legacy CSS file was a mess and I preferred not to touch it, so I cheated by doing this - please don't tell anyone :)
<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>
Also to note, when I upgraded from Font Awesome version 4.7.0 to version 5.4.1 this issue went away! I used this setup guide and this HTML
<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
I think you have not fonts folder in your root folder like where stay css folder.
Demo
And css folder is like
And fonts folder like
I hope it will work for you.
Thanks you.
In my case:
You need to copy the whole font-awesome folder to your project css folder and not just the font-awesome.min.css file.
So it seems adding style='font-weight:normal;' or otherwise changing the font directly on the element overrides the .fas{font-weight:900} definition in Font Awesome's CSS file. I guess the font has specific defines within the font file that it works with. It seems the font-weight must be set between 501 and 1000, or the font may look like a square block.
In my case, the problem was caused by using some regular styles (far) that are not included in the free set. Changing to fas fixed it.
my issue was the one having most of the votes
*{
font-family: xxxxx
}
changing it to this solved the problem
body{
font-family: xxxx
}
In my case, it worked by adding adding font-family, for example adding an Instagram icon, i needed to add font-family as FontAwsome:
.fa-instagram:before {
content: "\f16d";
font-family: "FontAwesome" !important;
}
You may have used a VCS (git or somesuch) to transfer icon files to the server.
git says:
warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.
You probably have to fix your fonts.
On MacOS Mojave, I had this problem in Safari. The font-awesome images worked in Chrome but not in Safari, so I was sure it wasn't the site.
I got them to render by going to Preferences in the Safari menu, and disabling/unchecking "Prevent cross-site tracking" under the Privacy tab.
Not sure why this fixed it, but it did.
Watch out for Bootstrap! Bootstrap will override .fa classes. If you're bringing in both packages separately thinking "I'll use Bootstrap for responsive block handling and Font-Awesome for icons", you need to address the .fa classes inside Bootstrap so they don't interfere with Font-Awesome's stand-alone implementation.
eg: font-family 'FontAwesome' in Bootstrap will interfere with font-family 'Font Awesome 5 Free' in Font-Awesome and you will get a white box instead of the icon you want.
There may be cleaner ways of handling this, but if you've gone down the checklist trying to fix the "white box" issue and still can't figure it out (like I did), this may be the answer you're looking for.
Based on the 5.10.1 version.
My solution (locally):
If you're using "fontawesome.css" or "fontawesome.min.css", try using "all.css" instead (located in the css folder).
The "css" folder and the "webfonts" folder from the fontawesome package that you downloaded must be in the same level as each other.
In my case, I already had a css folder so I just renamed the fontawesome css folder to "css-fa".
With both "css-fa" and "webfonts" in my css folder, simply link it correctly in your text editor and it should work.
Ex: link rel="stylesheet" href="css/css-fa/all.css"
solved changing the targetted !importantized font-family selector from
* { ... }
to
*:not(i) { ... }
(with scss preprocessor); hope u solved
The code below is font-awesome 4.70.0. To go to font-awesome 5.11.2, click here.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-camera-retro" aria-hidden="true"></i>
</html>
I was following this tutorial to host Font Awesome Pro 5.13 myself.
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
For some reason I could not get <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet"> to load webfonts that in turn resulted in only squares showing up. But when I used <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script> everything started working. Both links were added in HTML <head>.
I was trying to add fa 5.0.13 to drupal 8 with scss.
The styles are not included by default in the main fa.scss had to add them manually.
#import "libraries/fontawesome/fa-brands";
#import "libraries/fontawesome/fa-light";
#import "libraries/fontawesome/fa-regular";
#import "libraries/fontawesome/fa-solid";
Related
I recently installed font-awesome from the site using npm. When I am using it in my HTML file, it ends up showing squares on the page instead of the icon. Can someone help me with this?
The code where I am using the fontawesome icons:
<li class="nav-item active"><a class="nav-link" href="index.html"><span class="fas fa-home"></span> Home</a></li>
I have included the CSS as well.
Black squares usually indicate a fault in font type. But I cant say this for sure. Try san serif, otherwise you can check out the answers in this post:
Font awesome is not showing icon
Best answer there:
In my case i made the following mistake in my css code.
*{
font-family: 'Open Sans', sans-serif !important;
}
This will override all font family rules for the entire page. My solution was to move the code to body like so.
body{
font-family: 'Open Sans', sans-serif;
}
NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.
Answer By: Daniel Barde
--
It also can depend on how you import the library, is it via the CDN or via a folder?
Via a CDN: Check if the path / url is correct (Maybe an unauthorised link?).
Via folder / download:
Maybe use"/fonts/fontawesome-free-5.3.1-web/css/all.css"
instead of
"/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css".
I'm using assan template
to build my laravel project. Everything is fine but the font awesome wont show up. then I'm using this link to fix it:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
after that, font awesome showed successfully, but the icons not. Here is the code where i put my icon:
<i class='icon-pictures fa-3x mb20 text-primary'></i>
I'm pretty sure that i've already include all java script and css to my project. but I don't know why this happen. is there something i can do or maybe i missed something?
The method for displaying an icon is that you have to use "fas fa-" following with which icon you want.
In the <i> class add fas fa- and the icon name after the -, This will display the icon.
I might be asking a dumb question, but I am a newbie in javascript and its libs.
I came across the same problem as this post, and in the accepted answer, there was this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
However, after adding this line I have a navbar icon even though I did not include a img in my html. I also cannot manipulate the position of this icon built with this stylesheet. Can anyone explain what it does in this context? (referring to the post) I noticed that without this line of code the CSS and Javascript cannot be applied to a simple
<img class="search" src="icon.png" width="30" height="30">
And how is it possible for me adjust the location of the icon with this line of code?
font awesome is a css sheet, that when you use "font awesome classes" on a particular element, makes an icon appear. there's no jpgs or anything to mess with.
<i class="fa fa-address-book" aria-hidden="true"></i>
in a plain html, this will do nothing. but if you add the stylesheet to the page, you will see an address book icon.
all icons are located here: http://fontawesome.io/icons/
I am so new to HTML and CSS. I would like to work on a free template first to see what is going on behind the template. I using this free template. It uses font-awesome icons. And I know that font-awesome does not have some icons like Research-Gate and Academia et cetera... I would like to implement them by using Academicons. But I could not do it! I followed everything that has been written but it still does not show, let's say, Research-Gate icon! Could you please help me about tha? Thanks in advance!
It goes something like this in <head> tag.
a. Add font-awesome.css
b. add academicons.css (Must be specified before font-awesome)
c. Keep the directory like this -
--CSS
--Fonts
--font-awesome.css
--academicons.css
To use it add it in your HTML. eg;
<i class="fa fa-check"></i><i class="ai ai-google-scholar-square fa-3x"></i>
Here, first one is font-awesome and second one is academicons.
Demo Here
---UPDATE---
Since you are using above specified template, which import all other css files in default.css
In this case you can put your academicons.css in css/font-awsome/academicons.css folder. Download the academicons.zip and extarct. Copy the fonts from fonts folder and paste it to css/font-awesome/fonts
Finally add <link rel="stylesheet" href="css/font-awesome/academicons.css"> in head tag.
Hope this help. Do comeback if any issue.
This question already has answers here:
How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
(5 answers)
Closed 7 years ago.
I would like to use font awesome within my jsf app, but unfortunately it seems, that some icons are not displayed.
Instead of the icon I just could see a square symbol.
My jsf page look like this:
<div class="centerbox" style="bottom: 5mm; top: 5mm;">
<i class="fa fa-chain fa-5x"></i>
<i class="fa fa-wheelchair fa-5x"></i>
<h:outputLabel value="#{msg.systemNotAvailable}" />
<h:outputText value="Allocation"/>
</div>
I included the css file as follows:
<h:outputStylesheet name="font-awesome.css" library="css" media="screen"/>
The strangs thing is, that the fa-chain icon is displayed correct, but the wheelchair icon not.
When I look into the html and change the code of the icon, it seems that there are a couple of icons not working.
I tried this with the lated version 4.4.0
Does anybody else face this problem or can give me a hint how to fix?
You can always use the live css from MaxCDN, example:
http://jsfiddle.net/web_nfo/zfdgna5w/
https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
( Source: https://fortawesome.github.io/Font-Awesome/get-started/#bootstrapcdn )
Maybe the font files (fontawesome-webfont.eot, fontawesome-webfont.woff2, etc) are not loaded properly. In the css there are some relative paths, if you do not have the fonts on your (local) server it does not work.
first of all thanks for your reply.
I think the problem was, that the font files were installed in resource folder in webapp.
Since I put it into the WebContent- root all icons could be displayed.
Thank you very much for your support :-)