Font Awesome图标不显示、菜单动画失效及网页布局问题如何修复？

图标无法显示+菜单点击无反应修复 #

• 替换Font Awesome引入地址，原引入仅加载核心配置没有图标资源，替换为全量样式包：将https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css改为https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css
• 修正viewport标签错误：将<meta name="viewport" content="with=device-width, initial-scale=">改为<meta name="viewport" content="width=device-width, initial-scale=1.0">，原代码中width拼写错误、initial-scale未赋值，会导致移动端适配异常
• 修正JS语法错误：将document.getElementbyId("navLinks")改为document.getElementById("navLinks")，原方法名中Id的首字母需要大写，错误写法无法正确获取菜单元素，导致点击事件失效

移动端菜单项未单独占行修复 #

媒体查询中的选择器拼写错误，将.navi-links ul li改为.nav-links ul li，原代码多写了字母i导致display: block规则未生效，菜单项无法纵向排列。

首页文本未居中修复 #

删除head内嵌样式中.text-box的margin: 20px属性，该属性覆盖了原有CSS的绝对定位居中逻辑，删除后对应样式调整为：

.text-box{
  background-color: transparent;
  color: #FFF;
  padding: 20px;
}

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