0

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

现在我遇到了这些图标不在同一行的问题： Font-Awesome 自定义图标 Glyphicon

我们有一个 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 ......

有任何想法吗？

4

1 回答 1

0

这是我的解决方案：

[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;
}
于 2015-06-10T08:05:12.540 回答