hcard with icons

hcard.html

<ul class="vcard">
  <li class="fn">Gareth Redfern</li>
  <li class="email">
    <span aria-hidden="true" data-icon="&#x29;" class="icon-alone"></span>
    <span class="screen-reader-text">Email</span>
    <span>your@email.com</span>
  </li>
  <li class="tel">
    <span aria-hidden="true" data-icon="&#x28;" class="icon-alone"></span>
    <span class="type screen-reader-text">work</span>
    <span class="value">+44 1234 567897</span>
  </li>
  <li class="tel">
    <span aria-hidden="true" data-icon="&#x26;" class="icon-alone"></span>
    <span class="type screen-reader-text">cell</span>
    <span class="value">+44 7777 234567</span>
  </li>
  <li class="twitter">
    <span aria-hidden="true" data-icon="&#x23;" class="icon-alone"></span>
    <span class="screen-reader-text">twitter</span>
    <span>@garethredfern</span>
  </li>
  <li class="linkedin">
    <span aria-hidden="true" data-icon="&#x25;" class="icon-alone"></span>
    <span class="screen-reader-text">linkedIn</span>
    <span>garethredfern</span>
  </li>
</ul>