Foundation Top Bar - FA Icon Doesn't Display Correctly

[LDigital84]

I know Foundation support is planned for 4.0 (#1212). This is a bug I found with using Font Awesome in Foundation.

I have an icon in my top bar navigation. This icon isn't aligned like my text. Screenshot:

After digging through the CSS I found the problem. In Font Awesome we have the following CSS:

[class^="icon-"], [class*=" icon-"]{
    line-height: normal;
}

This is overriding the CSS for Foundation's Top Bar which is:

.top-bar-section li a:not(.button){
    line-height: 45px;
}

Thus the Font Awesome Icon doesn't display correctly. I was able to correct this using the following CSS:

.top-bar-section li a:not(.button) .icon-search  {
   line-height: 45px !important;
}

I would love to see this issue fixed in 4.0.

Thank You!

[tagliala]

It should be automatically fixed with the new syntax, because there should be no need of line-height hacks here and there

[tagliala]

refers to #730

[LDigital84]

@tagliala - You were correct. I just updated the site I was having this issue on to FA 4.0.1 and it works fine now. =>

[tagliala]

@Lynda333 glad to hear that, because unfortunately we had to include line-height: 1 in the base class