CODEWITHSUNDEEP
listzurb-foundationnavbarfont-awesome
Colin
Colin

Reputation: 2189

Foundation 5 with Font-Awesome navbar icons

I'm trying to build icons into my navbar using Font-Awesome's list icons. Here's my code:

<section class="top-bar-section">
  <ul class="right fa-ul">
    <li class="fa-li fa fa-cog"><a href="#">Settings</a></li>
    <li class="has-dropdown fa-li fa fa-user">
      <a href="#">User</a>
      <ul class="dropdown fa-ul">
        <li class="fa-li fa fa-sign-out"><a href="#>Sign out</a></li>
      </ul>
    </li>
  </ul>
</section>

This ends up looking pretty gross:

foundation font-awesome icon list

Any ideas if these things can work together nicely? I know I could just add the icons into my links like:

<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>

but I'd like to do it the Right Way™, if possible.

EDITED (09-Dec):

Here is a fiddle of how it looks without Font Awesome icons:

http://jsfiddle.net/S5q7z/

And with:

http://jsfiddle.net/S5q7z/1/

Upvotes: 3

Views: 5809

Answers (2)

atilkan
atilkan

Reputation: 5028

Fontawesome github news says that they will support foundation like bootstrap. check the link might help. And there are people using it. https://github.com/FortAwesome/Font-Awesome/issues/1212

Upvotes: 1

nickhar
nickhar

Reputation: 20853

Font-awesome (latest version) is designed to dovetail with bootstrap, which it does, but it doesn't dovetail with foundation quite so easily and not at the level you seek.

You've got a couple of options and that depend upon just how far you're willing to pursue the "Right Way™"...

Option 1 - customise/perfect:

Looking briefly at the code, it's clear from your attempts that foundation and font-awesome don't mix at the level you want them to; Likely because there are conflicts in how div, drop-downs and li elements (amongst others) are treated by foundation and font-awesome respectively.

You can spend time debugging these compatibilities, but it will probably involve quite some time in customising both to work with each other in concert and in the way that you're hoping for.

Option 2 - adapt:

It's not the solution you seem to be seeking, but the basic method you cite works:

<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>

Fiddle here demonstrating it: http://jsfiddle.net/g6t44/

From a functional and delivery perspective, if this method works and takes:

  • A fraction of the time to implement (which it will)
  • Works largely cross-browser and device (I tested briefly at various widths, but not comprehensively)
  • Meets the visual/UX needs of the project
  • Is cost-effective

Then you have to consider the time vs. cost vs. value approach.

Of course, from a personal perspective, you could fork zerb and create a new font-awesome-zerb version if you're willing to make it more compatible and available to the wider community, but this might be out-of-scope here with regard to your question and indeed the time you have available to address the subject.

Upvotes: 4

Related Questions