Font awesome no icons at all, tried to fix with other threads

user_15447208 0
Viewed 60

first post!

So I am trying to get font awesome to work on my PC and laptop, both running windows 10 and I cannot for the life of me get any method to work.

I have tried:

  1. downloading the zip file and following the guide to get it to work
  2. connecting with bootstrap url

Both yield the exact same result, an empty box with nothing in it.

I have the most recent update to Chrome and have tried to get this to work on my laptop and desktop, on chrome and Microsoft edge.

Test for html link(this is also not working):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <i class="fab fa-instagram"></i>
</body>
</html>

Original project:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="./Resources/CSS/all.css">
    <link rel="stylesheet" scr="./Resources/CSS/reset.css">
    <link rel="stylesheet" href="./Resources/CSS/style.css">
    <title>Home Chef</title>
</head>
<body>
<div>
    <i class="fa fa-instagram fa-2x"></i> /* This no matter the syntax "fa", "fas", "fab" are all not producing the icon */
</div>
</body>
</html>

File structure for original:

   ->CSS
     ->Webfonts /* I tried to move this into the same directory as the index.html and that did not work 
                 either */ 
      -> all.css
      -> reset.css
      -> style.css
   ->Images
   index.html

Thank you.

font-awesome css html
2 Answers

Your first code loads version 4 of Fontawesome and the way to get the instagram icon would be:

<i class="fa fa-instagram"></i>

You maybe intended to use version 5? (you can get a key from the Fontawesome site) and then use the fab syntax.

user_108674540 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <i class="fa fa-instagram"></i>
</body>
</html>

user_86143430
Related