Changing a list's icon's size and position

Question

Hi there!
I have been trying to follow this tutorial to add social media icons to my site:
http://www.webtutorialplus.com/elegant-social-media-menu-with-css/
I have managed to do this, however am now trying to rearrange it (I think its in a list format), so that the icons are vertically aligned, rather than horizontally.
I am also trying to change the size of them, preferably so that they resize according to the fluid grid layout that I am using.
HTML:
<div class="social">
          <ul>
                    <li><a href="#" title=""><span class="icon"><i aria-hidden="true" class="icon-facebook">
                    </i></span><span>Like</span> </a></li>
                    <li><a href="#" title=""><span class="icon"><i aria-hidden="true" class="icon-twitter">
                    </i></span><span>Follow</span></a> </li>
                    <li><a href="#" title=""><span class="icon"><i aria-hidden="true" class="icon-mail">
                    </i></span><span>Email</span></a> </li>
          </ul>
</div>
CSS:
.social
          width: 480px;
          margin-top: 60px;
          margin-right: auto;
          margin-bottom: 60px;
          margin-left: auto;
.social ul
    padding: 0;
    list-style: none;
    font-size: 16px;
.social li
    float: left;
    width: 60px;
    text-align: center;
.social li span
    display: block;
.social a
    display: block;
    color: #ffffff;
    text-decoration: none;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
.social ul:hover a
    color: rgba(255, 255, 255, 0.6);
.social ul:hover a:hover
    color: #ffffff;
.social li:nth-child(1) i
    background: rgb(59, 89, 152);
    box-shadow: 0 0 0 0 rgba(59, 89, 152,0.6);
.social li:nth-child(2) i
    background: rgb(0, 172, 238);
    box-shadow: 0 0 0 0 rgba(0, 172, 238, 0.6);
.social li:nth-child(3) i
    background: rgb(210, 64, 46);
    box-shadow: 0 0 0 0 rgba(210, 64, 46,0.6);
.social i
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 12px;
    border-radius: 50%;
    font-size: 30px;
    transition: box-shadow .4s ease-in-out;
    -moz-transition: box-shadow .4s ease-in-out;
    -webkit-transition: box-shadow .4s ease-in-out;
    -o-transition: box-shadow .4s ease-in-out;
.social a:hover i, .social a:active i
    box-shadow: 0 0 0 25px transparent;
.social .icon + span
    margin-top: 20px;
    opacity: 0;
    -webkit-transition: all 500ms cubic-bezier(1.000, 0.000, 1.000, 0.650);
    -moz-transition: all 500ms cubic-bezier(1.000, 0.000, 1.000, 0.650);
    -ms-transition: all 500ms cubic-bezier(1.000, 0.000, 1.000, 0.650);
    -o-transition: all 500ms cubic-bezier(1.000, 0.000, 1.000, 0.650);
    transition: all 500ms cubic-bezier(1.000, 0.000, 1.000, 0.650);
.social a:hover span, .social a:active span
    opacity: 1;
/* ICOMOON Starts Here */
@font-face {
          font-family: 'icomoon';
          src:url('fonts/icomoon.eot');
          src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
                    url('fonts/icomoon.woff') format('woff'),
                    url('fonts/icomoon.ttf') format('truetype'),
                    url('fonts/icomoon.svg#icomoon') format('svg');
          font-weight: normal;
          font-style: normal;
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
          font-family: 'icomoon';
          content: attr(data-icon);
          speak: none;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
/* Use the following CSS code if you want to have a class per icon */
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
.icon-mail, .icon-facebook, .icon-twitter {
          font-family: 'icomoon';
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
.icon-mail:before {
          content: "\e000";
.icon-facebook:before {
          content: "\e001";
.icon-twitter:before {
          content: "\e002";
Many thanks
Max

Answer 1

Many thanks for your help Nancy. That works well.
Do you know how to change the size of the icons, I have been trying everything!
Many thanks
Max