Html 字体很棒，相同的图标有不同的宽度

我对字体图标有点问题

我有两个相同版本的网站（用于开发和测试），图标显示方式不同，但CSS样式相同

我用这个图标描述了这个问题：

.btnFilter{
颜色：#666666；
垫面：4px；
字号：18px；
文本对齐：居中；
}
.圆圈{
边框：实心#999 1px；
边界半径：13px；
框大小：边框框；
宽度：26px；
高度：26px；
文本对齐：居中；
字号：18px；
}

---

我认为这与字体大小有关。我想这是因为font awesome有一个

    font: normal normal normal 14px/1 FontAwesome;

因此，删除字体大小或调整您的字体大小使用em和它应该工作的预期

如果你加上！重要的是你的字体大小，你会看到奇怪的结果，你看到你的网站之一

.btnFilter{
颜色：#666666；
垫面：4px；
字体大小：18px！重要；
文本对齐：居中；
}
.圆圈{
边框：实心#999 1px；
边界半径：13px；
框大小：边框框；
宽度：26px；
高度：26px；
文本对齐：居中；
字体大小：18px！重要；
}

---

我认为在这里使用

em

而不是

px

值会更好……然后一切都会根据字体大小进行调整

至于您的具体问题，font awesome中的

行高

/

字体大小

与您的特定样式之间存在冲突

顶部填充物也可能不是必需的

html{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
保证金：0；
填充：0；
}
.btnFilter{
颜色：#666666；
字体大小：160px！重要；
/*仅供演示*/
线高：1米；
文本对齐：居中；
}
法兰西：以前{
行高：继承；
}
.圆圈{
边框：实心#999 1px；
边界半径：50%；
宽度：1.1米；
高度：1.1米；
}