如何将导航栏分隔符更改为图标

Question

我用基础css创建了navbar。我使用font-awesome作为图标。我想将分隔符从一行更改为一个图标（确切地说是一个字体很棒的图标）。 我尝试在divider div中添加一个图标，它并没有为我做这个伎俩。 有什么想法吗？

Jsfiddle

这就是它现在的样子：

但我想用图标替换那一行。例如，这张图片使用了一个点，但我将使用一个星。

<nav class="top-bar" data-topbar role="navigation" id="navbar">
     <ul class="title-area">
        <li class="toggle-topbar menu-icon">
            <a href="#">
                <span></span>
            </a>
        </li>
    </ul>
    <section class="top-bar-section">
    <!--right nav section--> 
        <ul class="right">
            <li class="">
                <a href="#">Sign Up</a>
            </li>
            <li class="divider">
                <i class="fa fa-star"></i>
            </li>
            <li>
                <a href="#">sign in</a> 
            </li>   
      </ul>
       <ul class="left">
         <li>
            <a href="#">Demo</a>
         </li>
         <li>
            <a href="#">Features</a>
         </li>  
      </ul>
   </section>
</nav>

Answer 1

由于基础框架覆盖了<li class="divider"></li>的css，您遇到了问题 使用css：border-right-width: 0px !important;强制你自己的css支配框架。 此外，width: auto !important;对于带有菜单项的分隔符图标的适当边距是必要的。

这是图标的小提琴 -
http://jsfiddle.net/mmtbhfyL/8/

唯一的问题是星形图标没有垂直对齐。为此，您必须在li.divider。

中设置自定义填充

Answer 2

divider类强制元素有width: 0;隐藏元素的内容，例如你的字体真棒图标，以防止这种行为，你可以覆盖这样的基础类：

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
    width: auto;
    border: 0;
    color: #fff;
}