If the Font Awesome icons are displaying as blank squares in all browsers despite correctly linking the stylesheet and attempting to install the package through npm which results in a npm ERR! code E401, it can be frustrating. Even after checking the browser developer console for error messages and finding none, the icons still refuse to show.
<!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">
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<div class="Grid-container">
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<img id="Logo" src="icon.png" alt="Hydrogen atom">
<img id="Chemistry Lab" src="Chemistry.JPG" alt="Chemist Lab">
<!-- The form -->
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="Page Title">
<h1 id="name">Periodic</h1>
<h1 id="subname">Table</h1>
</div>
<div class="Subheading">
<h2 id="Subheading 1">118 Elements</h2>
<h2 id="Subheading 2">7 Periods</h2>
</div class="Body text">
<p id="Translations">{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id="Definition">The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
<a href="#down">Click Here to Smoothly Scroll Down</a>
<i class="fa-solid fa-angle-down"></i>
<div id="down">
<h1>You are down!</h1>
</div>
</div>
</body>
</html>