I got the fontawesome-free-5.8.2-web package from fontawesome.com and added the css and webfonts files to my project root. I included it in index.html, but when I try to use the icons, all I see is an empty square. What should I do? Thank you
Here is the code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>دوره مجازی آموزش طراحی قالب وردپرس</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<!--<script src="https://use.fontawesome.com/84c3f8fd28.js"></script>-->
<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
<!--<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>-->
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!--Top Bar-->
<div id="top-bar">
<div class="container">
<nav id="top-rightmenu">
<ul>
<li><a href="#"><i class="fas fa-file-alt"></i> وبلاگ </a></li>
<li><a href="#"><i class="fas fa-list-alt"></i> شغل ها </a></li>
<li><a href="#"><i class="fas fa-bullhorn"></i> پشتیبانی </a></li>
<li><a href="#"><i class="fas fa-globe"></i> فارسی </a></li>
</ul>
</nav>
<div class="top-left-social">
<ul>
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</div>
<!--End Top Bar-->
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>