Menu icon Foundation
Left Aligned social media icons

The drip.html template has a great code snippet to center social media icons and have nice spacing.

 

<row class="collapsed footer">
<columns>
  <spacer size="16"></spacer>
  <p class="text-center">@copywrite nobody<br/>
  <a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
  <center>
    <menu>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
    </menu>
  </center>
</columns>
</row>

 

I want the icons to be aligned left. If I remove the center tag, the icons spread across the page.

I've tried customizing the code, but I can't get the icons to align left with even spacing.

Does someone know of a easy way to get the icons to left align?

emailsocial media iconsimages

The drip.html template has a great code snippet to center social media icons and have nice spacing.

 

<row class="collapsed footer">
<columns>
  <spacer size="16"></spacer>
  <p class="text-center">@copywrite nobody<br/>
  <a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
  <center>
    <menu>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
      <item><img src="http://placehold.it/25/663399" alt=""></item>
    </menu>
  </center>
</columns>
</row>

 

I want the icons to be aligned left. If I remove the center tag, the icons spread across the page.

I've tried customizing the code, but I can't get the icons to align left with even spacing.

Does someone know of a easy way to get the icons to left align?

Wally Glenn 2 months ago

This is the code for the drip.html file:

 

https://jsfiddle.net/wallyglenn/fqs9qcLe/

Aisling McCagh 2 months ago

Hi,

I used the link to the framework Wally sent.

 

                        

<table align="left" class="menu float-left" width="225" style="width: 225px;">
 <tr>
  <td>
   <table>
     <tr>
      <th class="menu-item float-center">
        <a href="undefined"><img src="http://placehold.it/25/663399" alt=""></a>
      </th>
      <th class="menu-item float-center">
        <a href="undefined"><img src="http://placehold.it/25/663399" alt=""></a>
      </th>
      <th class="menu-item float-center">
        <a href="undefined"><img src="http://placehold.it/25/663399" alt=""></a>
      </th>
      <th class="menu-item float-center">
       <a href="undefined"><img src="http://placehold.it/25/663399" alt=""></a>
      </th>
      <th class="menu-item float-center">
       <a href="undefined"><img src="http://placehold.it/25/663399" alt=""></a>
      </th>
     </tr>
    </table>
   </td>
  </tr>
</table>