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

Question

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

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

我必须自定义 CSS 才能让它显示在框中，我在网上找到了一个用圆圈做的教程，我只是更改了边框半径，使它们成为带圆角的正方形。所以它使用了一个名为 .circle-icon 的 class，上面有以下 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 的宽度和高度属性没有应用。

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

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

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

icon font in a box not displaying correctly in IE

css

wordpress

icons