字體真棒圖標顯示為空白方塊？
[英]Font awesome icons are showing up as blank squares?
問題描述
如果在我的 HTML 文件中，Font Awesome 圖標在所有瀏覽器中都顯示為空白方塊，即使我已正確鏈接樣式表並且我已嘗試使用 npm 安裝 package，但它會拋出 npm ERR。 代碼 E401，我還檢查了瀏覽器開發人員控制台的錯誤消息。 但沒有顯示任何錯誤。
<,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>
1 個解決方案
解決方案1
1 2023-01-24 11:13:26
您使用的 class 名稱用於 fontawesome v6 ，並且您在項目中包含舊版本v5 ，請確保復制您正在使用的版本的圖標類
<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>
字體真棒圖標顯示為導航之間的正方形[僅限Chrome]
[英]Font Awesome Icons showing as squares between navigation [Chrome Only]
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.