内联li元素与字体真棒链接

Question

我有以下html：

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
  <ul class="nav navbar-nav">
  <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
  <li class="hidden">
    <a href="#page-top"></a>
  </li>
  <li>
    <a class="page-scroll" href="#apr">APR</a>
  </li>
  <li>
    <a class="page-scroll" href="#about">About</a>
  </li>
    <% if current_user %>
      <li>
      <div class="fafa_inline"><i class="fa fa-sign-out"></i><%= link_to "Log Out", log_out_path, class: "page-scroll" %></div>
      </li>
    <% else %>
      <li>
      <div class="fafa_inline"><i class="fa fa-plus"></i><%= link_to " Sign Up", sign_up_path, class: "page-scroll" %></div>
      </li>
      <li>
      <div class="fafa_inline"><i class="fa fa-sign-in"></i><%= link_to " Log In", log_in_path, class: "page-scroll" %></div>
      </li>
    <% end %>
  <li>
    <a class="page-scroll" href="#contact">Contact</a>
  </li>
  </ul>
</div>

基本上，对于登录和注销的用户来说，这样做的显示方式不同，即他们会看到注册+登录/注销。

我想要合并的是一些很好的字体很棒的东西，这很好用。但是，使用以下css：

.fafa_inline {
    display: inline;
    color: #ffffff;
}

它们以内联方式显示，但略高于其他li元素，例如：

如果有人有潜在的解决方案，无论是在HTML还是CSS中，我都会非常感激。我绝对难过！