Middle align difference: Material-icons vs Font-Awesome

Question

Why Material-icons cannot set vertical align middle with text even though exactly same css of Font-Awesome? (with Bootstrap3)

Both of them has &:before { content: '{icontext}' }

image: Left: Material-icons / Right: Font-Awesome

<a class="btn btn-default">  
  <i class="material-icons"></i>  
  <i class="fa fa-bookmark"></i>
  123
</a>

.material-icons {
    display: inline-block;
    font: normal normal normal 14px/1 'Material Icons';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

edit:

attached jsfiddle https://jsfiddle.net/laires/guxwxvzL/

i don't know the exact answer to your question but if the issue is align vertically it is done easily by flexbox — Fadi Abo Msalam, Apr 06 '17 at 08:26
Post a working code snippet, with the linked library versions you used — Asons, Apr 06 '17 at 08:51
ok, i attached jsfiddle : https://jsfiddle.net/laires/guxwxvzL/ — Seungjin Kang, Apr 07 '17 at 03:43
i don't know why but in my project case, it worked with adding vertical-align: -15%. — Seungjin Kang, Apr 07 '17 at 03:50

score 0 · Answer 1 · answered Apr 06 '17 at 11:33

0

Try to add vertical-align: middle in .material-icons { ... }

answered Apr 06 '17 at 11:33

Rafael Pérez

24
4

I tried but it's not working on different box padding, line-height cases – Seungjin Kang Apr 07 '17 at 03:07

score 0 · Answer 2 · answered Apr 07 '17 at 07:12

0

Here an example with different line-height and paddings.

I add the class vertical-align: middle; in .material-icons.

The code:

https://jsfiddle.net/rafalito1989/yutqc2xL/

hope you helpful

answered Apr 07 '17 at 07:12

Rafael Pérez

24
4

Middle align difference: Material-icons vs Font-Awesome

2 Answers2