FontAwesome icons not showing Why

Question

Recently I ve been developing this website and I m trying to put a font awesome icons in it  so it s scalable   The thing is they are not showing up   Look at the HTML    lt a class  btn-cta-freequote  href     gt Get a FREE Quote  lt i class  fa fa-arrow-right  gt  lt  i gt  lt  a gt    or   lt li gt  lt a href  index html  gt  lt span class  fa fa-home fa-2x  gt  lt  span gt Home lt  a gt  lt  li gt    I did put the stylesheet reference in the head   I don t know why they aren t showing up   Here is the reference    lt link href    maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt    Alright  here is the full html    lt head gt       lt meta charset  UTF-8  gt       lt title gt Retrica lt  title gt       lt link src  http   maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt        lt link href  style normalize css  rel  stylesheet  type  text css  gt       lt link href  style bootstrap min css  rel  stylesheet  type  text css  gt       lt link href  style main css  rel  stylesheet  type  text css  gt   lt  head gt    lt body gt       lt header class  top-header  gt           lt div class  container  gt  lt  -- Start Container -- gt               lt div class  row  gt  lt  -- Start Row -- gt                   lt div class  span3  gt  lt  -- Start Span3 -- gt                       lt div class  logo  gt  lt img src  img Retrica  2x png  alt    width  67px  height  13 5px  gt  lt  div gt                   lt  div gt  lt  -- End Span3 -- gt                   lt div class  span9  gt  lt  -- Start Span9 -- gt                       lt nav class  main-nav  gt    lt  -- Start Nav -- gt                            lt a class  btn-cta-freequote  href     gt Get a FREE Quote  lt i class  fa fa-arrow-right  gt  lt  i gt  lt  a gt                           lt ul class  nav-ul  gt   lt  -- Start Unordered List -- gt                               lt li gt  lt a href  index html  gt  lt span class  fa fa-home fa-2x  gt  lt  span gt Home lt  a gt  lt  li gt                               lt li gt  lt a href     gt  lt span class  fa fa-mobile-phone fa-2x  gt  lt  span gt  Contact Us lt  a gt  lt  li gt                            lt  ul gt   lt  -- End Unordered List -- gt                       lt  nav gt  lt  -- End Nav -- gt                   lt  div gt  lt  -- End Span9 -- gt               lt  div gt  lt  -- End Row -- gt           lt  div gt  lt  -- End Container -- gt       lt  header gt        lt section gt            lt a href     class  btncta  gt Register Now lt  a gt       lt  section gt    lt  body gt

User · Answer

I got mine to work by editing the main font-awesome css file  It has urls to the src  woff  eot  etc     I had to change them to the absolute path eg  http   mywebsite com font-awesome woff  Then it worked

User · Answer

For version 5   If you downloaded the free package from this site   https   fontawesome com download  The fonts are in the all css and all min css file   So your reference will look something like this    lt link href   MyProject Content fontawesome-free-5 10 1-web css all min css  rel  stylesheet  gt    The fontawesome css file does not include the font reference

User · Answer

Notes  This answer is created when the latest version of fontawesome is v5   but yarn and npm version points to v4    21 06 2019   In other words  versions installed via package managers is behind latest release    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   Installing font-awesome as new dependency     yarn add font-awesome success Saved lockfile  success Saved 1 new dependency  info Direct dependencies  - font-awesome 4 7 0 info All dependencies  - font-awesome 4 7 0 Done in 3 32s    Checking what version of font-awesome is already installed     yarn list font-awesome yarn list v1 16 0 warning Filtering by arguments is deprecated  Please use the pattern option instead   - font-awesome 4 7 0 Done in 0 79s    Problem  After you installed font-awesome dependency  you incorporate one of these two source files font-awesome css or font-awesome min css  founded in node modules font-awesome css   into header of your webpage e g     lt head gt     lt link type  text css  rel  stylesheet  href  css font-awesome css  gt   lt  head gt    Next  you visit https   fontawesome com   You select free icons and you search for sign-in icon  as an example   You copy the icon e g   lt i class  fas fa-sign-in-alt  gt  lt  i gt   you paste it into your html and  icon is not shown  or is display as square or rectangle    Solution  In essence  versions installed via package managers is behind version that is shown on https   fontawesome com  website  As you can see we installed font-awesome v4 7 0 but  website shows documentation for font-awesome 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

User · Answer

At first I couldn t get this to work with Font Awesome 5    lt i class  fa fa-sort-down  gt  lt  i gt    That s why I came here  being unfamiliar with font awesome  So when I looked further I noticed that my issue was merely an issue with the version   w3schools helped me out in this case      New in Font Awesome 5 is the fas prefix  Font Awesome 4 uses fa       The s in fas stands for solid  and some icons also have a   regular mode  specified by using the prefix far    I already noticed the different files in the FontAwesome css folder  like    all min css brands min css fontawesome min css regular min css solid min css   And that s when I realized my mistake  All I had to do was include the appropriate css to the html    lt link rel  stylesheet  href    lib Font-Awesome css fontawesome min css  gt   lt link rel  stylesheet  href    lib Font-Awesome css regular min css  gt   lt link rel  stylesheet  href    lib Font-Awesome css solid min css  gt    And then reference the correct item    lt i class  fas fa-sort-down  gt  lt  i gt    This setup works for me  Though not all items have equivalents in each type  This will not work    lt i class  far fa-sort-down  gt  lt  i gt    As a side note  when you don t want to reference all seperate files then this will suffice    lt link rel  stylesheet  href    lib Font-Awesome css fontawesome min css  gt   lt link rel  stylesheet  href    lib Font-Awesome css all min css  gt

User · Answer

I use    lt link rel  stylesheet  href  http   fontawesome io assets font-awesome css font-awesome css  gt   lt a class  icon fa-car  aria-hidden  true  style  color white   href  http   viettelquangbinh com  gt  lt  a gt    and style after    icon  before   display  inline-block  margin-right   5em  font  normal normal normal 14px 1 FontAwesome  font-size  inherit  text-rendering  auto  -webkit-font-smoothing  antialiased  -moz-osx-font-smoothing  grayscale  transform  translate 0  0

User · Answer

I have tested and it s working   Instead of this   lt link href    maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt    Use it with HTTPS   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt

User · Answer

Make sure you include the rel and type as in   rel  stylesheet   type  text css   in the link to the awesomefont css file  Without these the file wasn t loading correctly for me

User · Answer

You can add this in  htaccess file in the directory of awesome font  AddType font ttf  ttf AddType font eot  eot AddType font woff  woff AddType font woff  woff2 AddType font otf  svg   lt FilesMatch     ttf otf eot woff    gt       lt IfModule mod headers c gt          Header set Access-Control-Allow-Origin          lt  IfModule gt   lt  FilesMatch gt

User · Answer

Try the below two links keep in header tag    lt link href  http   maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt    Getting the Icons from the below link     lt link rel  stylesheet  href  http   fortawesome github io Font-Awesome 3 2 1 assets font-awesome css font-awesome css  gt

User · Answer

For seekers of missing font-awesome icons  I have collected a few ideas    Assure you use a correct link to the CDN  such as    lt link    href  http   cdnjs cloudflare com ajax libs font-awesome 4 3 0 css font-awesome css     rel  stylesheet   type  text css  gt   If your page uses HTTPS  do you link to the font-awesome CSS using HTTPS  replace http    with https    in the link above   Double check that you don t have AdBlock Plus or uBlock enabled  They might be blocking some of the icons  Reset your browsers cache   On Chrome do a looong click on the reload button and select Hard Cache Reset  Assure that the  lt span gt  or  lt i gt  element you use  uses the FontAwesome font family  For example  it must not just   lt i class  fa-pencil  title  Edit  gt  lt  i gt    but   lt i class  fa fa-pencil  title  Edit  gt  lt  i gt    It won t work if you have something as the following in your CSS         font-family   Josefin Sans   sans-serif  important        If you are using IE8  are you using a HTML5 Shim  If this doesn t work  there are further Troubleshooting Ideas on the Font Awesome Wiki

User · Answer

Change this    lt link href    maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt    To this    lt link href  http   maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  type  text css  gt    I believe you need the http  otherwise it doesn t know what protocol to use  and uses the wrong one  file  for instance  as a result

User · Answer

Under your reference  you have this    lt link href    maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt    Specifically  the href  part   However  under your full html is this    lt link src  http   maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt    Have you tried replacing src  with href  in your full html to become this    lt link href  http   maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt    Works for me  http   codepen io TheNathanG pen xbyFg

User · Answer

If you define custom CSS you must set font-weight  900  for some newer Font Awesome library  from version 5   Not setting this font-weight it may show squares

User · Answer

the CDN link that you had posted i suppose is why it wasnt showing correctly  you can use this one below  it works perfectly for me    x000D   x000D   lt link href  http   maxcdn bootstrapcdn com font-awesome 4 1 0 css font-awesome min css  rel  stylesheet  gt  x000D   x000D   x000D

User · Answer

Just adding some more info to the above answers in regards with update on fontawesome   If you use font awesome 5    a  just copy-to-paste the below HTML    lt script defer src  https   use fontawesome com releases v5 0 8 js all js  integrity  sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ  crossorigin  anonymous  gt  lt  script gt    Note  Better to include all your scripts within the  lt body gt   YOUR SCRIPT HERE  lt  body gt  and just before   YOUR CLOSING BODY   b  And for example    lt li gt  lt a href  https   stackoverflow com users  USER   class  social-icons  gt  lt i class  fab fa-stack-overflow  gt  lt  i gt  lt  a gt  lt  li gt

User · Answer

Mine was not working because I wanted an icon which was not released in the FA version I was using   This answers why some icons shows but others no   Pretty obvious but I guess some people still fall for this  Like me

User · Answer

I solved this problem by putting the Fonts directory at the same level as my CSS files

User · Answer

If you are using blogger hosting  use this url stylesheet css    lt link href  https   maxcdn bootstrapcdn com font-awesome 4 3 0 css font-awesome min css  rel  stylesheet   gt

User · Answer

If you are using a newer version of Angular  just installing the package with npm yarn is not enough  You also need to import the css file  with  import  quot  bootstrap-icons font bootstrap-icons css quot    in your styles scss

User · Answer

You must use https for maxcdn bootstrapcdn com  Only https on maxcdn support CORS   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 2 0 css font-awesome min css  rel  stylesheet  media  screen    gt

User · Answer

I got the similar problem  Shows icons in square  tried as per the instructions specified here   https   fontawesome com how-to-use on-the-web setup hosting-font-awesome-yourself Resolved by using this reference in head section of html page  lt link rel  quot stylesheet quot  href  quot https   use fontawesome com releases v5 13 0 css all css quot  gt

User · Answer

adding this worked for me    lt link href  https   fortawesome github io Font-Awesome assets font-awesome css font-awesome css  rel  stylesheet  gt    take a look  so full example is    x000D   x000D   lt link href  https   github com FortAwesome Font-Awesome blob master web-fonts-with-css css fontawesome css  rel  stylesheet  gt  x000D   lt a class  btn-cta-freequote  href     gt Compute  lt i class  fa fa-calculator  gt  lt  i gt  lt  a gt  x000D   x000D   x000D

User · Answer

To whoever may be checking this out in 2018  I am using font awesome 4 7 0 and I got this issue solved by simply taking out the s in fas as seen in the code  lt i class  fa fa- icon-name   gt  lt  i gt   This was originally  lt i class  fas fa- icon-name   gt  lt  i gt     Hope this helps

User · Answer

You need a font importer   try   lt style gt    import url https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css      lt  style gt

User · Answer

I was able to get Font Awesome to work by using the all min css file

User · Answer

Use this link   lt link rel  quot stylesheet quot  href  quot https   cdnjs cloudflare com ajax libs font-awesome 5 14 0 css brands min css quot  integrity  quot sha512-AMDXrE qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT XRPQ4e LTnwl84mCv eFm92UG6ErWDtGM Q5Q   quot  crossorigin  quot anonymous quot    gt

[html] FontAwesome icons not showing. Why?

Examples related to html

Examples related to css

Examples related to font-awesome