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>

有人可以帮助我吗？

Answer 1

At first you need to load Font Awesome then use it. Look at this links to understand how it works. It is simple.

Introduction Font Awesome

Brand icons

Instagram Example

Try this code.

Be sure that you loaded Font Awesome correctly.

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

Answer 2

操作方法如下，由于要将图标栏固定在导航栏上方，因此我们必须从fixed-top中删除navbar类，因为然后将{{1} }到图标栏将与我们的导航栏重叠。

因此将导航栏和图标栏都包装在包装div中，并将该div改为position:fixed。如果您了解基本的CSS，那么其他事情都是不言而喻的。

这里是一个代码段或一个fiddle，以防万一，

position: fixed

#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;
}

Answer 3

Here's your answer. I can tell you're using WordPress from your code.

1) Install the Better Font Awesome plugin and activate it - https://wordpress.org/plugins/better-font-awesome/

2) Add the following code:
Note: aria-labels in the code below is used by screen readers like VoiceOver on a Mac (see https://www.youtube.com/watch?v=5R-6WvAihms for a demo) so it's good to include this code. A screen reader (software on a computer, cell phone, or tablet) will say something like "Facebook link" and "WhatsApp link" and then people with disabilties (i.e. blind people) can know it's a link to click on.

<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) Do searches for more Font Awesome icon code at https://fontawesome.com/icons?d=gallery

引导程序导航栏上方的图标

3 个答案: