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的宽度和高度属性。

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

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

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

1 个答案: