css - 如何为不同大小的符号创建相同大小的边框？

Question

我使用Font Awesome图标及其fa-border样式：

<i class="fa fa-twitter fa-5x fa-border icon-blue"></i>
<i class="fa fa-question fa-5x fa-border icon-grey"></i>

但是创建的边框大小取决于符号大小（参见示例）。我怎样才能让它总是方形的？

Answer 1

您可以尝试显式设置元素的heightand width，i使其方形有一个使用:after伪元素的技巧，使用该技巧，您只需要指定width（无需指定height），这将帮助您更好地维护页面如果您想更改正方形大小：

CSS：

i { 
  width:100px;
  text-align:center;
  vertical-align:middle;
}
/*only :after works*/
i:after {
  content:'';
  padding-top:100%;
  display:inline-block;
  vertical-align:middle;
}

小提琴

Answer 2

我会得到尽可能大的尺寸并将它们都设置为至少那么大。然后将您的“文本”居中

i { min-width:74px; text-align:center; }

http://jsfiddle.net/zxVhL/4/ - 演示

Answer 3

您可以在 CSS 和中心文本中设置宽度

i.fa {
    width:70px;
    text-align:center;
}

http://jsfiddle.net/zxVhL/3/