0

I'm using fontastic.me (Custom icons CSS) to display some social icons with MaterializeCSS. I can't get it aligned properly. As shown in images below.

Materialize FAB, the icons aren't in center

Text and Icon not aligned properly

1) Materialize FAB, the icons aren't in center

2) Text and Icon not aligned properly

Could anyone help me with aligning these correctly?

<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>
Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
Nitin Jain
  • 41
  • 9
  • Just taking a casual stab in the dark here, since there are no relevant styles to refer to or consider; have you tried adjusting the `line-height` of the icons in question? – UncaughtTypeError Nov 21 '17 at 14:39
  • A simple fix would be to apply something like `.btn .icon { position: relative; top: 5px; }`. If you don't like this approach; play around with the properties `vertical-align` and `line-height`. – JasonK Nov 21 '17 at 14:41
  • `.btn .icon { position: relative; top: 5px; }` Didn't work. – Nitin Jain Nov 21 '17 at 14:45
  • Building on the cornerstones @JasonK has laid down, you could declare `position: relative` on the containing element of the icons (the circle), make sure they have an explicit `width` and `height` defined, then declare `position: absolute` on the nested icon elements, give them a `height` and `top` and `bottom` properties with values of `0`, then declare `margin: auto` and `display: block`. Difficult to demonstrate without a full deck of cards to work with, but I hope that clear enough. – UncaughtTypeError Nov 21 '17 at 14:45

0 Answers0