Menu icon Foundation
Social media icons side by side in the footer, centered.

Hi Guys,

I'm trying to align some icons horizontally, which I have achieved but I can't can't center them. Here's my Inky:

<wrapper class="fw-footergray">
  <container>
    <row>
      <columns small="12" large="12">
        <spacer size="30"></spacer>
          <ul>
            <li><a href="#"><p class="text-center"><img class="social-icon" src="http://i.imgur.com/oyXO6zq.png" width="30" height="30"></p></a></li>
            <li><a href="#"><p class="text-center"><img class="social-icon" src="http://i.imgur.com/AJNmSZs.png" width="30" height="30"></p></a><li>
            <li><a href="#"><p class="text-center"><img class="social-icon" src="http://i.imgur.com/GLEVM7N.png" width="30" height="30"></p></a><li>
          </ul>
      </columns>
    </row>
    <row>
      <columns small="12" large="12">
        <spacer size="14"></spacer>
        <p class="text-center" style="margin-bottom:0;font-size:10px;color:#a8a8a8;">You're receiving this email because you are signed up to our Newsletter.</p>
        <p class="text-center"><a style="font-size:10px;color:#a8a8a8;text-decoration:underline;" href="#">Update your preferences</a>&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-size:10px;color:#a8a8a8;text-decoration:underline;" href="#">Unsubscribe from us</a></p>
        <spacer size="300"></spacer>
      </columns>
  </container>
</wrapper>

And here is the CSS I've used for some elements (.social-icon currently not used but will be to control the size of the icons on the small breakpoint)

ul {
  list-style-type: none;
  text-align: center;

li {
  float: left;
  margin-left:
}

 

Can anyone point me in the right direction? Thanks!

social Iconsullihorizontalcentered listcenter

Hi Guys,

I'm trying to align some icons horizontally, which I have achieved but I can't can't center them. Here's my Inky:

<wrapper class="fw-footergray">
  <container>
    <row>
      <columns small="12" large="12">
        <spacer size="30"></spacer>
          <ul>
            <li><a href="#"><p class="text-center"><img class="social-icon" src="http://i.imgur.com/oyXO6zq.png" width="30" height="30"></p></a></li>
            <li><a href="#"><p class="text-center"><img class="social-icon" src="http://i.imgur.com/AJNmSZs.png" width="30" height="30"></p></a><li>
            <li><a href="#"><p class="text-center"><img class="social-icon" src="http://i.imgur.com/GLEVM7N.png" width="30" height="30"></p></a><li>
          </ul>
      </columns>
    </row>
    <row>
      <columns small="12" large="12">
        <spacer size="14"></spacer>
        <p class="text-center" style="margin-bottom:0;font-size:10px;color:#a8a8a8;">You're receiving this email because you are signed up to our Newsletter.</p>
        <p class="text-center"><a style="font-size:10px;color:#a8a8a8;text-decoration:underline;" href="#">Update your preferences</a>&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-size:10px;color:#a8a8a8;text-decoration:underline;" href="#">Unsubscribe from us</a></p>
        <spacer size="300"></spacer>
      </columns>
  </container>
</wrapper>

And here is the CSS I've used for some elements (.social-icon currently not used but will be to control the size of the icons on the small breakpoint)

ul {
  list-style-type: none;
  text-align: center;

li {
  float: left;
  margin-left:
}

 

Can anyone point me in the right direction? Thanks!

Jack Hobbs about 3 years ago

 

What I have at the minute.

Rafi Benkual about 3 years ago

 Hi Jack - that will be a nice looking footer when you're done. There is a section int the docs for centering a menu here: http://foundation.zurb.com/emails/docs/alignment.html#centering-a-menu