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

Question

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

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

我必须自定义 CSS 以使其显示在框中，我在网上找到了一个使用圆形的教程，我只是更改了边框半径以使它们成为带圆角的正方形。所以它使用了一个名为 .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，但无法使其正常工作。我做错了什么还是有更好的方法将这些图标放在一个带圆角的蓝色小框的中心？

谢谢。

Answer 1

<i> 标签的使用是错误的。在 HTML 中，<i> 应该代表文本的替代部分（通常以斜体呈现），内联元素也是如此。有时它被用来渲染一个图标，但它是语义上的误用。

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

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

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