Question

我正在尝试向我的活动导航栏添加箭头，但没有成功。我在导航栏中使用FA（font awesome）图标。我试图使用FA右箭头图标并将其附加到我的导航栏但没有成功。这是我的代码：

HTML -

<body>
        <div class="navbar navbar-inverse navbar-fixed-left">
          <a class="navbar-brand" href="wishlist.html"><img src="image/logo3.png"></a>
          <ul class="nav navbar-nav">
           <li class="li1"><a href="wishlist.html"><i class="fa fa-shopping-cart" aria-hidden="true" style="font-size:30px;"></i></a></li>
           <li class="li2"><a href="#"><i class="fa fa-bar-chart" aria-hidden="true" style="font-size:30px;"></i></a></li>
           <li class="li3"><a href="#"><i class="fa fa-bell" aria-hidden="true" style="font-size:30px;"></i></a></li>
           <li class="li4"><a href="#"><i class="fa fa-cog" aria-hidden="true" style="font-size:30px;"></i></a></li>
          </ul>
        </div>

CSS：

.navbar {
    border-radius: 0px;
}

.navbar-brand {
    width: 100%;
    height: 70px;
    margin: 10px 0 10px 0px;
}

.navbar-brand img {
    height: 60px;
    width: 50px;
    padding-bottom: 4px;
    margin: -10px 0px 10px 0px;
}

.navbar-fixed-left {
    width: 81px;
    position: fixed;
    height: 100%;
}

.navbar-fixed-left .navbar-brand > li {
    float: none;  /* Cancel default li float: left */
    width: 80px;
}

.navbar-fixed-left .navbar-brand > li.active{
    position: relative;
  }
.navbar-fixed-left .navbar-nav > li.active:after{
    border-bottom: 10px solid #e7e7e7;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "rerereree";
    height: 10px;
    left: 40px;
    margin: auto;
    position: absolute;
    right: 0;
    top: -10px;
    width: 0;
  }

谢谢。

更新 - 我想要获取的屏幕截图 这就是我想要的。

新形象！

Answer 1

css有一些变化。你引用了＆＃34; navbar-brand＆＃34;而不是＆＃34; navbar-nav＆＃34;在css。因此，它并没有针对正确的元素。

希望这就是你所追求的： https://jsfiddle.net/adx8cu21/3/

.navbar {
    border-radius: 0px;
}

.navbar-brand {
    width: 100%;
    height: 70px;
    margin: 10px 0 10px 0px;
}

.navbar-brand img {
    height: 60px;
    width: 50px;
    padding-bottom: 4px;
    margin: -10px 0px 10px 0px;
}

.navbar-fixed-left {
    width: 81px;
    /*position: fixed;*/
    height: 100%;
}

.navbar-fixed-left .navbar-nav  li {
    float: none;  /* Cancel default li float: left */
    width:80px;
    border: solid 1px green;
    list-style-type: none;
    margin:0px auto;
    display:table;
    text-align:center;
}

.navbar-fixed-left .navbar-brand > li.active{
    position: relative;

  }
.navbar-fixed-left .navbar-nav > li.active:after{
    border:solid 1px red;
    content: "\f054";
    display:inline-block;
    margin: auto;
    left:130px;
    position:absolute;
    margin-top:5px;
  }

箭形导航栏 - Bootstrap

1 个答案: