如何像文本一样正确对齐Fontastic.me图标？

Question

我使用fontastic.me（自定义图标CSS）来显示MaterialiseCSS的一些社交图标。我无法正确对齐它。如下图所示。

1）实现FAB，图标不在中心

2）文字和图标未正确对齐

有人可以帮我正确对齐这些吗？

＆＃13;

＆＃13;

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red"><i class="large icon icon-share"></i></a>
  <ul>
    <li><a class="btn-floating green"><i class="large icon icon-whatsapp"></i></a></li>
    <li><a class="btn-floating blue"><i class="large icon icon-facebook"></i></a></li>
  </ul>
</div>

<button class="btn waves-light waves-effect green"><i class="icon icon-whatsapp"></i> WhatsApp</button>

＆＃13;

＆＃13;

＆＃13;