javascript - 如何将导航栏分隔线更改为图标

Question

我用 foundations css 创建了一个 navbar。我正在为图标使用超棒的字体。我想将分隔线从一条线更改为一个图标(准确地说是一个字体很棒的图标)。 我尝试向分隔线 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;对于带有菜单项的分隔图标的适当边距是必要的。

这是带有图标的 fiddle -
http://jsfiddle.net/mmtbhfyL/8/

唯一的问题是星形图标没有垂直对齐。为此，您必须在 li.divider 中设置自定义填充.