多种图标字体答案

【问题标题】：Multiple Icon Fonts多种图标字体
【发布时间】：2015-08-25 07:28:40
【问题描述】：

我们正在使用 glyphicons、FontAwesome 和我们的自定义 Icon-Font。

现在我遇到了这些图标不在同一行的问题：

我们有一个 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 种图标字体的自定义字体，我想我可以解决这个问题，但我希望能够轻松更新 fontAwesome 或 Glyhpicons...

有什么想法吗？

【问题讨论】：

你有没有尝试使用 line-height 属性，使用 line-height 你应该能够对齐你的图标
原来如此，谢谢

标签： font-awesome glyphicons icon-fonts

【解决方案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;
}

【讨论】：