Font awesome is not showing icon

Question

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     lt html gt   lt head gt   lt link rel  stylesheet  href     css font-awesome css  gt       lt link rel  stylesheet  href     css font-awesome min css  gt   lt  head gt   lt body gt   lt div style  font-size  44px   gt      lt i class  fa fa-camera-retro fa-lg  gt  lt  i gt  fa-lg  lt i class  fa fa-camera-retro fa-2x  gt  lt  i gt  fa-2x  lt  div gt   lt  body gt   lt  html gt    I would like to know how to make the icon display instead of the bordered square box

User · Answer

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

User · Answer

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      lt a class  nav-link fa fa-instagram  style  font-family FontAwesome   href    www instagram com xxxx   target   blank  gt  lt  a gt    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   lt a class  nav-link  href    www instagram com xxxx   target   blank  gt  lt i class  fab fa-instagram  gt  lt  i gt  lt  a gt

User · Answer

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

User · Answer

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

User · Answer

x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs font-awesome 5 11 2 js all js  integrity  sha256-2JRzNxMJiS0aHOJjG liqsEOuBb6  9cY4dSOyiijX4   crossorigin  anonymous  gt  lt  script gt  x000D   x000D   x000D

User · Answer

my issue was the one having most of the votes     font-family  xxxxx     changing it to this solved the problem  body  font-family  xxxx

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  quot libraries fontawesome fa-brands quot    import  quot libraries fontawesome fa-light quot    import  quot libraries fontawesome fa-regular quot    import  quot libraries fontawesome fa-solid quot

User · Answer

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

User · Answer

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    lt a class  nav-link  href    www facebook com xxx  target   blank  gt  lt i class  fab fa-facebook-f  gt  lt  i gt  lt  a gt    See  https   fontawesome com icons facebook-f style brands

User · Answer

i was facing the same issue   so instead of downloading font awesome    i added a link in my html code and it worked    x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs font-awesome 5 11 2 js all js  integrity  sha256-2JRzNxMJiS0aHOJjG liqsEOuBb6  9cY4dSOyiijX4   crossorigin  anonymous  gt  lt  script gt  x000D   x000D   x000D

User · Answer

First  check that you have class  fa  as well as whatever the icon s class is  So  not just   lt i class  fa-pencil  title  Edit  gt  lt  i gt    But also   lt i class  fa fa-pencil  title  Edit  gt  lt  i gt     Then it works as expected  This solved my issue

User · Answer

In my case  I needed to combine the answers from sst  amp  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  lt link rel  quot stylesheet quot  href  quot    static  myapplication vendor fontawesome css all min css     quot  gt

User · Answer

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

User · Answer

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     lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com font-awesome 4 2 0 css font-awesome min css  type  text css  gt    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

User · Answer

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

User · Answer

You needed to close your   lt link   gt    As you can see in your  lt head gt  lt  head gt  tag  This will solve your problem   lt head gt       lt link rel  stylesheet  href     css font-awesome css    gt       lt link rel  stylesheet  href     css font-awesome min css    gt   lt  head gt

User · Answer

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  lt link href   PUBLIC URL  font-awesome all min css  rel  stylesheet  gt  to load webfonts that in turn resulted in only squares showing up  But when I used  lt script defer src   PUBLIC URL  font-awesome all min js  gt  lt  script gt  everything started working  Both links were added in HTML  lt head gt

User · Answer

It s something to do with v5  some of the icons don t work with older versions  This link worked for me   lt link rel  quot stylesheet quot  href  quot https   cdnjs cloudflare com ajax libs font-awesome 5 15 1 css all min css quot  gt

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

solved changing the targetted  importantized font-family selector from             to    not i             with scss preprocessor   hope u solved

User · Answer

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

User · Answer

The code below is font-awesome 4 70 0  To go to font-awesome 5 11 2  click  here    lt  DOCTYPE html gt    lt html gt    lt head gt    lt link rel  stylesheet   href  https   cdnjs cloudflare com ajax libs font-  awesome 4 7 0 css font-awesome min css  gt    lt  head gt    lt body gt    lt i class  fa fa-camera-retro  aria-hidden  true  gt  lt  i gt    lt  html gt

User · Answer

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    lt link href  https   cdnjs cloudflare com ajax libs font-awesome 5 9 0 css all min css  rel  stylesheet  gt

User · Answer

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

User · Answer

I m using FontAwesome Pro  and the solution for me was to embed all min css instead of fontawesome min css

User · Answer

you need to put font-awesome file in css folder and change href  quot    css font-awesome css quot  to href  quot css font-awesome css quot  One more thing You can Replace this Font-awesome css File And and try this one  x000D   x000D   social-media    list-style-type  none    padding  0px    margin  0px      social-media li  fa     background   fff    color   262626    width  50px    height  50px    border-radius  50     text-align center    line-height 50px       social-media  fa hover      box-shadow  5px 5px 5px  000       social-media  fa fa-twitter hover    background  55acee    color  fff        social-media  fa fa-facebook hover    background  3b5998    color  fff    x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet  gt    lt ul class  social-media  gt     lt li gt  lt i class  fa fa-twitter fa-2x  gt  lt  i gt  lt  li gt     lt li gt  lt i class  fa fa-facebook fa-2x  gt  lt  i gt  lt  li gt     lt  ul gt  x000D   x000D   x000D

[html] Font awesome is not showing icon

Examples related to html

Examples related to css

Examples related to font-awesome