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

Question

I created a navbar with foundations css. I am using font-awesome for the icons. I want to change the divider from a line to an icon (a font-awesome icon to be precise). I tried adding an icon to the divider div, it didn't do the trick for me. Any ideas?

Jsfiddle

This is what it looks like right now:

But I want to replace that line by an icon. For example, this picture uses a dot but I will use a star.

<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

You are getting the problem because of the foundation framework which is overriding the css for <li class="divider"></li> Use the css: border-right-width: 0px !important; to force your own css to dominate the framework's. Also, width: auto !important; is necessary for proper margin of the divider icon with menu items.

Here is the fiddle with the icon -
http://jsfiddle.net/mmtbhfyL/8/

The only problem is the star icon is not vertically aligned. For this you have to set custom padding in the li.divider .

Answer 2

The divider class is forcing the element to have width: 0; which hide the content of the element, such as your font awesome icon, to prevent this behavior you can override foundation class like this:

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