Font awesome icons are showing up as blank squares?

Question

If in my HTML file, Font Awesome icons are showing up as blank squares in all browsers, even though I've linked the stylesheet correctly and I've tried to install the package using npm, but it throws a npm ERR. code E401, I've also checked the browser developer console for error messages. but there are no errors being displayed.

 <,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>

Answer 1

The class names that you are using are for fontawesome v6 and you are including an older version v5 in your project, make sure you copy the icons classes for the version that you are using

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <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> </div> </div> </div> <h3 id="Website name">EVERYTHING CHEMISTRY</h3> <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> <i class="fa-solid fa-angle-down"></i>

this is the link for v5 icons https://fontawesome.com/v5/search?o=r&s=regular

Font awesome icons are showing up as blank squares?

Question

1 answers

solution1
1 2023-01-24 11:13:26

Font awesome icons are showing up as blank squares?

Question

1 answers

solution1 1 2023-01-24 11:13:26

solution1
1 2023-01-24 11:13:26