Html 引导导航栏上方的图标

我想在navbar元素上方放置一些图标（facebook、instagram、youtube、whatsapp），如下所示：

这是我的代码：

<nav class="navbar fixed-top navbar-expand-lg navbar-light navbar-custom">
      <a class="navbar-brand" href="http://localhost/wp/">
        <img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png">         </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"></ul>
        <ul id="menu-menu-principal" class="navbar-nav">
            <li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a></li>
            <li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a></li>
            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19  nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20  nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
        </ul>
    </div>
</nav>

---

有人能帮我吗？

首先你需要加载字体，然后使用它。 查看此链接以了解其工作原理。这很简单

试试这个代码

确保已正确加载字体

  <nav class="navbar fixed-top navbar-expand-lg navbar-light navbar-custom">

  <div class="social">  

    <a href="#"><i class='fab fa-instagram' style='font-size:24px'></i> </a>
  <a href="#"> <i class='fab fa-facebook' style='font-size:24px'></i></a>
  <a href="#"><i class='fab fa-twitter' style='font-size:24px'></i></a>
  <a href="#"><i class='fab fa-linkedin' style='font-size:24px'></i></a>
    <a href="#"><i class='fab fa-pinterest' style='font-size:24px'></i></a> 

  </div>

  <div class="menu">  

      <a class="navbar-brand" href="http://localhost/wp/">
        <img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png">         </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"></ul>
        <ul id="menu-menu-principal" class="navbar-nav">
            <li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a></li>
            <li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a></li>
            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19  nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20  nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
        </ul>
    </div>

 </div>
</nav>

这是你的答案。我可以从你的代码中看出你在使用WordPress

1） 安装更好的字体真棒插件并激活它-

2） 添加以下代码：
注意：下面代码中的aria标签由Mac上的VoiceOver等屏幕阅读器使用（请参阅演示），因此最好包含此代码。屏幕阅读器（电脑、手机或平板电脑上的软件）会说“Facebook链接”和“WhatsApp链接”，然后残疾人士（即盲人）就可以知道这是一个可以点击的链接

<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
    <i class="fab fa-facebook-square"></i>
</a>
<a href="https://www.whatsapp.com/" target="_blank" aria-label="WhatsApp">
    <i class="fab fa-whatsapp"></i>
</a>
etc.

等

---

3） 在

上搜索更多字体很棒的图标代码。以下是您的操作方法，因为您希望将导航栏上方的图标栏设置为固定，因此我们必须从

导航栏

中删除

固定顶部

类，因为这样将

位置：固定

赋予图标栏将与导航栏重叠

因此，将导航栏和图标栏都包装在包装器div中，并将该div改为

position:fixed

。若你们知道基本的css，其余的事情是不言自明的

下面是一段代码片段或一个示例，以防您无法理解它

#顶部包装{
位置：固定；
顶部：0；左侧：0；右侧：0；
背景颜色：绿色；
z指数：999；
}
#顶部包装。图标栏{
宽度：100%；
溢出：自动；
}
#顶部包装。图标栏{
浮动：对；
列表样式：无；
保证金：0；
填充：16px 16px 16px 0；
}
#顶部包装。图标栏ul li{
浮动：左；
填充：0 16px；
右边框：1px点#fff；
}
#顶部包装。图标栏ul li：最后一个孩子{
边界：无；
}
#上一页{
颜色：#FFF；
字体大小：14px；
}
.科{
高度：100vh；
背景颜色：灰色；
}

你好，世界
你好，世界
Hello world

谢谢，但我知道字体很棒，我想知道如何将其放在导航栏项目上方