css - 框中的图标字体无法在 IE 中正确显示

Question

我使用带有 UDesign 主题的 Wordpress，其中包括 iconfonts，我在我的网站上使用这些在小蓝色框中显示图标，您可以在此页面上看到它们。

http://www.whichgreekisland.co.uk/islands/corfu/beaches/agnos/

我必须自定义 CSS 才能让它显示在框中，我在网上找到了一个用圆圈做的教程，我只是更改了边框半径，使它们成为带圆 Angular 的正方形。所以它使用一个名为 .circle-icon 的类，它上面有以下 css。

color: #FFF;
font-size: 2.4em;
background: #018ED7 none repeat scroll 0% 0%;
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
padding: 6px;
line-height: 2.6em;
margin-right: 10px;
border-radius: 3px;

它们在 Chrome 和 Firefox 上正确显示，例如，图标位于框的中央，但在 IE 中，框的底部丢失，因此图标位于框的底部并且框太小。

我试过更改 css，但我无法让它工作。我做错了什么或者是否有更好的方法让这些图标位于带圆 Angular 的蓝色小框的中央？

谢谢。

Answer 1

<i>的使用标签错了。在 HTML 中，<i>应该代表文本的交替部分(通常呈现为斜体)，内联元素也是如此。有时它用于呈现图标，但这是一种语义误用。

所以如果你使用 <i>要呈现一个图标，您应该将他的显示模式更改为 inline-block .实际上你的图标的大小只是根据伪元素的大小计算的 :before , line-height和填充(在内联元素上会出现奇怪的渲染)。所以你的 120px 的宽度和高度属性没有被应用。

您需要做的是添加以下规则以获得与当前在 Chrome/FF 中相同的渲染，但在 inline-block 中:

i {
  display: inline-block
  width: 53px;
  height: 48px;
}
i:before {
  line-height: 48px; /* vertically center the icon */
}