font-awesome - 複数のアイコン フォント

Question

グリフィコン、FontAwesome、およびカスタム アイコン フォントを使用しています。

今、これらのアイコンが同じ行にないという問題に直面しています:

アイコンを大きくし、アイコンを同じ行に配置する CSS クラスがあります。

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

その後vertical-align:text-bottom;、アイコンフォントの基本 CSS クラスに追加しようとしました。

.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;
}

しかし、アイコンはまだ同じ行にありません:(

3つのアイコンフォントすべてを含むカスタムフォントを1つだけ作成すれば、この問題を解決できると思いますが、fontAwesomeまたはGlyhpiconsを簡単に更新できるようにしたい...

何か案は？