多种图标字体

Question

我们使用的是字形图标、FontAwesome和自定义的图标字体。

现在我要解决的问题是这些图标不在同一行上：

​

我们有一个CSS类，它使图标变大，并且图标在同一行上：

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

之后，我尝试将vertical-align:text-bottom;添加到图标字体的基类中：

.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个图标字体，但我希望能够轻松地更新fontAwesome或Glyhpicons…

有什么想法吗？

Answer 1

以下是我的解决方案：

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