Font Awesome图标显示为空白方块的技术求助

一、图标显示空白的问题 #

你当前引用的是Font Awesome 5.15.1版本的CDN，但代码里误用了Font Awesome 6的类名规则：

• FA5中实心图标的类是fas，而你写的fa-solid是FA6的专属类，这直接导致图标无法加载。
• 只需要把代码里所有的fa-solid替换成fas即可：
  • 原代码：<i class="fa-solid fa-bars"></i> → 修改为：<i class="fas fa-bars"></i>
  • 原代码：<i class="fa-solid fa-angle-down"></i> → 修改为：<i class="fas fa-angle-down"></i>

修改后的完整代码示例：

<!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="fas 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="fas fa-angle-down"></i>
  <div id="down">
    <h1>You are down!</h1>
  </div>
  </div>
</body>
</html>

二、npm ERR! code E401错误解决 #

这个错误是npm权限验证失败导致的，解决步骤：

• 先检查npm镜像源：执行npm config get registry，如果是私有源，切换到官方源：npm config set registry https://registry.npmjs.org/
• 若使用官方源仍报错，大概率是登录令牌过期，执行npm logout清除旧令牌，再执行npm login重新输入账号密码完成登录
• 补充：如果只是需要在页面中使用Font Awesome，直接用CDN完全足够，不需要额外通过npm安装。

内容的提问来源于stack exchange，提问作者saf