Menu icon Foundation
Need help with centering inline-lists in footer

I'm using Foundation 5 and have used two inline-lists in my footer. Both I have been unable to center within their columns using any technique. If I remove the inline-list class, I am unable to figure out how to get them to float inline. If I leave it and adjust the margin-left, I run into problems resizing the browser. There's got to be an easier way and I just don't don't know what it is. Here's the codepen for it. Please see the screenshot that shows the 2 missing icons in the Codepen demo.

Footer

Foundation 5footerinline-listcentering

I'm using Foundation 5 and have used two inline-lists in my footer. Both I have been unable to center within their columns using any technique. If I remove the inline-list class, I am unable to figure out how to get them to float inline. If I leave it and adjust the margin-left, I run into problems resizing the browser. There's got to be an easier way and I just don't don't know what it is. Here's the codepen for it. Please see the screenshot that shows the 2 missing icons in the Codepen demo.

Footer
Rafi Benkual over 4 years ago

There was some (-) margin-left on the inline list. Removing it fixes this: http://codepen.io/rafibomb/pen/bnLDE

Katie over 4 years ago

Hi Kerry,

If I change your list item for the Twitter icon to:

 <li>
        <span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip tip-top radius" title="Follow us on Twitter"><a href="https://twitter.com/webrake" target="_blank" class="twit">xx<i class="fi-social-twitter"></i>xx</a></span>
        </li>

I get four xxxx in a circle. Are you including the icons and their fonts, and CSS. I didn't have any luck styling the icons, they didn't seem to be there.