Html 我的fa-fa栏未显示响应性顶部导航

所以我在这里稍微调整了一下。我为我的菜单创建了一个响应导航栏，但不幸的是，当它是移动形式时，它没有在菜单栏中显示标题。为了更新导航栏，我复制并粘贴了W3学校的代码，然后稍加修改。我打算以后换颜色

现在，我唯一的问题是当我进入响应模式时，fa条没有显示这是为什么？这里是我获得响应导航条的地方

告诉我我错过了什么。谢谢您可以运行下面的代码片段，看看我在说什么

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

.topnav{
溢出：隐藏；
背景色：#333；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子）{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav{
位置：相对位置；
}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

主页

您缺少

。如果你使用的是令人敬畏的字体，别忘了使用相关的css

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

.topnav{
溢出：隐藏；
背景色：#333；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子）{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav{
位置：相对位置；
}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}

主页

包括

---

在你之前的

嘿，谢谢你，这似乎奏效了！现在我有另一个问题了。请查看下面我的更新代码，以获取以粗体显示的答复。当我现在处于响应模式时，它似乎把我的个人资料图片搞砸了。然后在全屏上运行代码段和少数代码段，进入F12并进入响应模式，你就会明白我在说什么。@Azazel你说的搞砸是什么意思？你能添加一个你期望的模型吗？span看起来就像它应该做的一样。下面是它在桌面模式下的样子。这是当我进入iPhone模式并激活顶部导航栏时的外观是的，我已经尝试了多个导航栏，但在我的Chrome版本71.0.3578.98（官方版本）（64位）浏览器中一切都很好。