html - 引导导航栏上方的图标

Question

我想在导航栏元素上方放置一些图标（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>

任何人都可以帮助我吗？

score 0 · Accepted Answer

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

简介字体真棒

品牌图标

Instagram 示例

试试这个代码。

确保您正确加载了 Font Awesome。

  <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>

score 0 · Accepted Answer

这是您的操作方法，由于您想让导航栏上方的图标栏固定，我们将不得不从中删除fixed-top该类navbar，因为那样给position:fixed图标栏将与我们的导航栏重叠。

因此，将导航栏和图标栏都包装在一个包装器 div 中，并将该 div 设置为position: fixed。如果您了解基本的 css，其余的事情是不言自明的。

这是一个代码片段或小提琴，以防您无法弄清楚，

#top-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0;
    background-color: green;
    z-index: 999;
}
#top-wrapper .icon-bar {
    width: 100%;
    overflow: auto;
}
#top-wrapper .icon-bar ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 16px 16px 16px 0;
}
#top-wrapper .icon-bar ul li {
    float: left;
    padding: 0 16px;
    border-right: 1px dotted #fff;
}
#top-wrapper .icon-bar ul li:last-child {
    border: none;
}
#top-wrapper ul li i {
    color: #FFF;
    font-size: 14px;
}

.section {
    height: 100vh;
    background-color: grey;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- font awesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="top-wrapper"> <!-- this is our wrapper div -->
  <div class="icon-bar">
    <ul>
      <li><a href="#"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#"><i class="fa fa-instagram"></i></a></li>
      <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
      <li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
    </ul>
  </div>
  <nav class="navbar 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>
</div>

<div class="section">Hello world</div>
<div class="section">Hello world</div>
<div class="section">Hello world</div>

score -1 · Accepted Answer

这是你的答案。我可以告诉您正在从您的代码中使用 WordPress。

1) 安装 Better Font Awesome 插件并激活它 - https://wordpress.org/plugins/better-font-awesome/

2) 添加以下代码：
注意：下面代码中的 aria-labels由 Mac 上的 VoiceOver 等屏幕阅读器使用（有关演示，请参见https://www.youtube.com/watch?v=5R-6WvAihms ）所以包含此代码很好。屏幕阅读器（计算机、手机或平板电脑上的软件）会显示“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) 在https://fontawesome.com/icons?d=gallery上搜索更多 Font Awesome 图标代码

html - 引导导航栏上方的图标

3 回答 3

Related

Reference