Font Awesome not working icons showing as squares

Question

So I m trying to prototype a marketing page and I m using Bootstrap and the new Font Awesome file  The problem is that when I try to use an icon  all that gets rendered on the page is a big square    Here s how I include the files in the head    lt head gt           lt title gt Page Title lt  title gt           lt link rel  stylesheet  href  css bootstrap css  gt           lt link rel  stylesheet  href  css bootstrap-responsive css  gt           lt link rel  stylesheet  href  css font-awesome css  gt           lt link rel  stylesheet  href  css app css  gt           lt  -- if IE 7  gt               lt link rel  stylesheet  href  css font-awesome-ie7 min css  gt           lt   endif -- gt   lt  head gt    And here s an example of me trying to use an icon    lt i class  icon-camera-retro  gt  lt  i gt    But all that gets rendered in a big square  Does anyone know what could be going on

User · Answer

I had this issue  The problem was I had a font-family CSS style with  important overriding the fontawesome font

User · Answer

Double check the fontawesome-all css file - at the very bottom there will be a path to the webfonts folder  Mine had     webfonts  format in it  which meant that the css file would be looking 1 level up from where it is  As all of my css files were in css folder and I added the fonts to the same folder  this was not working   Just move your fonts folder up a level and all should be well     Tested with Font Awesome 5 0

User · Answer

Please add    import  https        net           font-awesome min css    font-face       font-family   FontAwesome       src  url  https        net           FontAwesome otf        src  url  https        net           FontAwesome otf  iefix       This to top of your css  download and link the css and font correctly  the problem is due to FontAwesome not loading correctly   Thanks

User · Answer

If the MIME TYPE is already having the  woff and  woff2 file types and still it s giving HTTP-404 error  check the request filtering  If this is restrictive  add these file types these with allow to serve and it shall work  Check it out

User · Answer

if your using sass and have imported in your main scss   import     vendor font-awesome scss font-awesome scss     The error may come from the font-awesome scss file that is looking for the font files in it s relative path   So remember to override the  fa-font-path variable    fa-font-path    https   netdna bootstrapcdn com font-awesome 4 3 0 fonts   default    like this there is no need to add the cdn in your index html

User · Answer

font-weight  900   I had a different issue with Font Awesome 5  Default font-weight should be 900 for FontAwesome icons but I overwrote it to 400 for span and i tags  It just worked  when I corrected it   Here is the issue reference in their Github page  https   github com FortAwesome Font-Awesome issues 11946  I hope it will help someone

User · Answer

So many answers so I add my working for me  Change name if you dont use PRO   In  typography less         Common                                                     amp  when   media-common   true       lib-font-face       family-name   font-family-name  fontawsomeregular       font-path     baseDir fonts webfonts fa-regular-400        font-weight  400       font-style  normal         lib-font-face       family-name   font-family-name  fontawsomelight       font-path     baseDir fonts webfonts fa-light-300        font-weight  300       font-style  normal          lib-font-face       family-name   font-family-name  fontawsomebrands       font-path     baseDir fonts webfonts fa-brands-400        font-weight  normal       font-style  normal         lib-font-face       family-name   font-family-name  fontawsomesolid       font-path     baseDir fonts webfonts fa-solid-900        font-weight  900       font-style  normal          In  theme less   import     includes fontawesome fontawesome less    fa-font-path     baseDir fonts webfonts        Fonts  font-family-name  fontawsomeregular   Font Awesome 5 Pro    font-family-name  fontawsomelight   Font Awesome 5 Pro    font-family-name  fontawsomebrands   Font Awesome 5 Brands    font-family-name  fontawsomesolid   Font Awesome 5 Pro     and example of usage     my-newclass before       content    f002        display  inline-block       float  left       font-family    font-family-name  fontawsomelight       font-size  16px

User · Answer

It wasn t working for me because I had Allow from none directive for the root directory in my apache config  Here s how I got it to work     My directory structure   root  root font-awesome 4 4 0 css font-awesome min css root font-awesome 4 4 0 fonts fontawesome-webfont   root dir1 index html   where my index html has    lt link rel  stylesheet  href     font-awesome 4 4 0 css font-awesome min css  gt    I chose to continue to disallow access to my root and instead added another directory entry in my apache config for root font-awesome     lt Directory   path root font-awesome   gt      Allow from all  lt  Directory gt

User · Answer

If you are using the version 5   or greater  then you have to use the      all css    or   all min css   Including the fontawesome css does not work as it has no reference to the webfonts folder and there is no reference to the  font-face or font-family  You can inspect this by searching the code for the font-family property in fontawesome css or fontawesome min css

User · Answer

I was having the same issue with font awesome 5 downloaded with yarn  I made added the min css file ALONG with the all js file   Hope this helps someone someone   lt link  rel  stylesheet    href  node modules  fortawesome fontawesome-free css fontawesome min css  gt   lt script src  node modules  fortawesome fontawesome-free js all js  charset  utf-8  gt  lt  script gt

User · Answer

I use the Official Font Awesome SASS Ruby Gem and fixed the error by adding the below line to my application css scss   import  font-awesome-sprockets     Explanation      The font-awesome-sprockets file includes the sprockets assest helper Sass functions used for finding the proper path to the font file

User · Answer

According to the documentation  step 3   you need to modify the supplied CSS file to point to the font location on your site

User · Answer

You must have 2 classes  the fas class and the fa-  class  See Basic Use in the docs   The fa prefix has been deprecated in version 5  The new default is the fas solid style and the fab style for brands      Correct  version  gt   5   lt i class  quot fas fa-search quot  gt  lt  i gt          Wrong  version  lt  5   lt i class  quot fa fa-search quot  gt  lt  i gt

User · Answer

I tried a number of the suggestions above without success   I use the NuGeT packages  The are  for some reason  multiple named version  font-awesome  fontawesome  font awesome  etc    For what it s worth  I removed all the version installed and then only installed the latest version of font awesome  font awesome just worked without the need to tweak or configure anything   I assume there are a number of things are missing from the other named versions

User · Answer

I had this issue and went through each step carefully   even though I ve been using FA for ages   and then I realized I had this line in my mail css file       font-family  Arial  important      Silly mistake  but this could tip off someone in future

User · Answer

If you installed font-awesome via package manager  yarn or npm  then  please be aware which version was installed   Alternatively  if you ve already installed font-awesome long time ago then  check what version was installed   In essence  versions installed via package managers might be behind version that is shown on https   fontawesome com  website  Thus  as it is today  21 06 2019  package manager will install v4 7 0 as the latest version but  website will point to documentation that refers to v5     Solution  visit the website that documents icons for v4 7 0 https   fontawesome com v4 7 0  copy appropriate icon e g   lt i class  fa fa-sign-in  aria-hidden  true  gt  lt  i gt  and incorporate it into your html  More context can be found here

User · Answer

MUST WORK THIS WAY  1  make sure you have the fontawesome cdn linked in the top of your page fontawesome cdn  2  make sure the  fa class has not been given another font-family property  Usually this happens when we give all the tags in our page a style  like this   x000D   x000D      x000D    font-family  Arial  x000D    x000D   x000D   x000D    instead use this   x000D   x000D    not  fa   x000D    font-family  Arial  x000D    x000D   x000D   x000D     make sure you typed in the exact class name give in the fontawesome website  copy and paste to make sure      x000D   x000D   lt i class  fa fa-home  gt  lt  i gt  x000D   x000D   x000D

User · Answer

I tried to solve the same problem with a few previous solutions  but they didn t work in my situation  Finally  I added these 2 lines in HEAD and it worked    lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com font-awesome 4 3 0 css font-awesome min css  gt   lt link rel  stylesheet  href  http   fortawesome github io Font-Awesome assets font-awesome css font-awesome css  gt

User · Answer

It could be possible that your font path is not correct so that css not able to load the font and render the icons so you need to provide the stranded path of attached fonts    font-face    font-family   FontAwesome   src  url  fonts fontawesome-webfont eot

User · Answer

With the  free  Font Awesome 5 version  there s this tiny detail which was hard to figure out for me and I didn t pay attention to it   Style   Availability    Style Prefix    Example Rendering Solid   Free            fas              lt i class  fas fa-camera  gt  lt  i gt  Brands  Free            fab              lt i class  fab fa-font-awesome  gt  lt  i gt     extracted from the documentation   With this cited  brand icons such as fa-twitter or fa-react need to be used with class fab while all other  free  icons need to be used with class fas  That s easy to oversee

User · Answer

After struggling for finding a solution and NOT finding the official documentation helpful  this solved the issue for me    Download the Fontawesome zip  I m using version 5 10 2 and i got it from here https   fontawesome com download Inside the zip file there are several folders You only need css and webfonts folders    Create 2 folders in your web projects  and name them css and webfonts      These names are mandatory  Now copy the content of css and webfonts from the zip into the corresponding folders in your project  And that s all   Beware fontawesome  Awesomeness is making things simple for the user

User · Answer

Use this    lt link href  https   maxcdn bootstrapcdn com font-awesome 4 2 0 css font-awesome min css  rel  stylesheet  gt    I had similar issue with Amazon Cloudfront CDN but it got resolved after I started loading it from maxcdn

User · Answer

You must have 2 classes  the fa class and the class that identifies the desired icon fa-twitter  fa-search  etc  hellip    lt  -- Wrong -- gt   lt i class  fa-search  gt  lt  i gt        lt  -- Correct -- gt   lt i class  fa fa-search  gt  lt  i gt

User · Answer

You must return the header Access-Control-Allow-Origin to   for your fonts files

User · Answer

What fixed the issue for me  on my Windows 7 machine  was decrypting my project directory  It s crazy how many visual and functional glitches originally arise from that when testing your website  Just get to a command prompt and run   attrib -R  PROJECT PATH       S cipher  a  d  s  PROJECT PATH       where  PROJECT PATH  is the full pathname to the directory where your code is stored

User · Answer

If you are using LESS or SASS  open the font-awesome less sass file and edit the path variable  fa-font-path      font   which points to the actual fonts    fa-font-path      font     font-face     font-family   FontAwesome     src  url    fa-font-path  fontawesome-webfont eot v 3 0 1      src  url    fa-font-path  fontawesome-webfont eot  iefix amp v 3 0 1   format  embedded-opentype        url    fa-font-path  fontawesome-webfont woff v 3 0 1   format  woff        url    fa-font-path  fontawesome-webfont ttf v 3 0 1   format  truetype      font-weight  normal    font-style  normal      Same with CSS  except you edit the path in the  font-face declaration block    font-face     font-family   FontAwesome     src  url  your path fontawesome-webfont eot v 3 0 1      src  url  your path fontawesome-webfont eot  iefix amp v 3 0 1   format  embedded-opentype        url  your path fontawesome-webfont woff v 3 0 1   format  woff        url  your path fontawesome-webfont ttf v 3 0 1   format  truetype      font-weight  normal    font-style  normal

User · Answer

This should be much simpler in the new version 3 0  Easiest is to point to the Bootstrap CDN  http   www bootstrapcdn com  v 01042013155511 tab fontawesome

User · Answer

This may help  check to ensure that you haven t inadvertently changed the font family on the icon  If you have changed the  fa item s font family from  FontAwesome the icon will not show  It s always something silly and small   Hope that helps someone

User · Answer

My problem was with adding the    lt link rel  stylesheet  href  bower components font-awesome css font-awesome min css  gt    inside a    lt  -- build css assets styles main css -- gt   lt  -- endbuild -- gt    tag  I fixed it by placing it outside the tag

User · Answer

Use with the upper class   lt div class  container  gt     lt i class  fa fa-facebook  gt  lt  i gt   lt  div gt

User · Answer

Using absolute instead of relative paths solved it for me  I was using relative paths  see first example below  and that didn t work  I checked via console and found the server was returning a 404  files not found    Relative path caused a 404     font-face    font-family   FontAwesome   src  url     fonts fontawesome-webfont eot v 4 0 3        Absolute path solved it cross browser    font-face    font-family   FontAwesome   src  url  http   www mysite com fonts fontawesome-webfont eot v 4 0 3        I wouldn t recommend doing this unless you have to  but it works for me  Ofcourse  you should repeat this for all the font formats in the font-awesome css file

User · Answer

As of Dec 2018  I find it easier to use the stable version 4 7 0 hosted on bootstrapcdn instead of the font-awesome 5 x x cdn on their website -- since every time they upgrade minor versions the previous version WILL break    lt link media  all  rel  stylesheet  href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  gt    Icons are the same    lt i class  fa fa-facebook  gt  lt  i gt

User · Answer

I have changed from 3 2 1 to 4 0 1 and the folder was font and now is called fonts   src  url     font fontawesome-webfont eot v 3 2 1     src  url     fonts fontawesome-webfont eot v 4 0 1     I hope it help someone

User · Answer

If your server is IIS  be sure to add the correct MIME to serve  woff file extension  The correct MIME is application octet-stream

User · Answer

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 amp 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 - gt  css              - gt  fonts   or the easiest way     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com font-awesome 4 4 0 css font-awesome min css  gt

User · Answer

i am using Font Awesome 4 3 0 just linking from maxcdn works as mentioned here    but to host in your server putting fonts and css in same folder worked for me  like this    then just link the css    lt link href    fonts font-awesome min css  rel  stylesheet    gt    hope helps someone

User · Answer

Starting in version 5  if you downloaded the package from this site   https   fontawesome com download  The fonts are in the all css and all min css file   This is what your reference would look like using the latest version now  replace with your folder     lt link href   MyProject Content fontawesome-free-5 10 1-web css all min css  rel  stylesheet  gt

User · Answer

Now in fontawesome 5 you can deliver a cached version of JS over Https     lt script defer src  https   use fontawesome com releases v5 0 9 js all js  integrity  sha384-8iPTk2s jMVj81dnzb iFR2sdA7u06vHJyyLlAd4snFpCl SnyUjRrbdJsw1pGIl  crossorigin  anonymous  gt  lt  script gt    More info on https   fontawesome com get-started svg-with-js

User · Answer

The  css all css file contains the core styling plus all of the icon styles that you   ll need when using Font Awesome  The  webfonts folder contains all of the typeface files that the above CSS references and depends on   Copy the entire  webfonts folder and the  css all css into your project   s static assets directory  or where ever you prefer to keep front end assets or vendor stuff    Add a reference to the copied  css all css file into the  of each template or page that you want to use Font Awesome on   Just Visit - https   fontawesome com how-to-use on-the-web setup hosting-font-awesome-yourself You will get the answer

User · Answer

In case you are working with Maven and Apache Wicket also check for the following in order to try to resolve the issue with Font-Awesome and icons not being loaded   If you have placed your files for example in the following file structure   src   main    java     your      package       css       font-awesome css       font       fontawesome-webfont eot       fontawesome-webfont svg       fontawesome-webfont svgz       fontawesome-webfont ttf       fontawesome-webfont woff   Check 1  Are you correctly using a Package Resource Guard in order to allow to load the font files correctly   Example from your class which extends WebApplication    Override public void init         super init           get   getResourceSettings   setPackageResourceGuard new PackageResourceGuard          Check 2  After you have made sure that all fonts are correctly transferred to the Web Browser  check for what has been actually transferred to the Web Browser  i e   did the integrity of the font files change  Compare the files in your source directory and the files transferred to the Web Browser using  e g   the Web Developer Toolbar of Firefox and DiffDog  for file comparison     In particular if you are using Maven be aware of resource filtering  Do not filter the folder where your  font files are contained - otherwise they will be corrupted   Example from your pom xml   lt build gt       lt finalName gt Your project lt  finalName gt       lt resources gt           lt resource gt               lt filtering gt true lt  filtering gt               lt directory gt src main resources lt  directory gt           lt  resource gt           lt resource gt               lt filtering gt false lt  filtering gt               lt directory gt src main java lt  directory gt               lt includes gt                   lt include gt    lt  include gt               lt  includes gt               lt excludes gt                   lt exclude gt      java lt  exclude gt               lt  excludes gt           lt  resource gt       lt  resources gt   lt  build gt    In the example above we do not filter the folder src main java  where the css and font files are contained   For further information on the filtering of binary data please also see the documentation   http   maven apache org plugins maven-resources-plugin examples filter html  In particular the documentation warns   Warning  Do not filter files with binary content like images  This will most likely result in corrupt output  If you have both text files and binary files as resources  you need to declare two mutually exclusive resource sets  The first resource set defines the files to be filtered and the other resource set defines the files to copy unaltered

User · Answer

I found a solution today which was to    Download the entire project from their Github page Then follow the rest of the steps on their page under the Default CSS section about moving the directory into your project and adding the link in the HEAD section of an  html file   The problem with their documentation is that they do not specify a link to where you should get a copy of the entire font-awesome project to put into your project

User · Answer

Use this  lt i class  fa fa-camera-retro   gt  lt  i gt  you have not defined fa classes

[css] Font Awesome not working, icons showing as squares

Examples related to css

Examples related to html

Examples related to twitter-bootstrap

Examples related to font-awesome