Multiple Icon Fonts

Question

We are using glyphicons, FontAwesome and our custom Icon-Font.

Now I'm getting to the issue that these icons are not on the same line:

We have an CSS Class that makes the icons bigger and with that the icons are on the same line:

.icon-5x {
    font-size: 5em !important;
    vertical-align: text-bottom;
}

After that I tried to add vertical-align:text-bottom; to the base CSS class of the icon-fonts:

.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;
    transform: translate(0, 0);
    vertical-align: text-bottom;
}
[class^="icon-custom-"], [class*=" icon-custom-"] {
    display: inline-block;
    font: normal normal normal 14px/1 custom-icons;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    vertical-align: text-bottom;
}
.glyphicon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font: normal normal normal 14px/1 'Glyphicons Halflings';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    vertical-align: text-bottom;
}

But now the icons are still not on the same line :(

I think I could solve this problem if I make only one custom fonts which contain all 3 icon-fonts but I want to be able easily update fontAwesome or Glyhpicons...

Any ideas?

Answer 1

Here is my Solution:

[class^="icon-custom-"], [class*=" icon-custom-"] {
    display: inline-block;
    font: normal normal normal 14px/1 custom-icons;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    vertical-align: text-bottom;
    line-height: 1;
}
.glyphicon {
    top: 0px!important;
    vertical-align: text-bottom!important;
}
.fa {
    line-height: 1!important;
    vertical-align: text-bottom!important;
}