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

Question

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

1）物化FAB，图标不在中心

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

谁能帮我正确对齐这些？

<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>