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>

但创建边框的大小取决于符号大小（请参阅example）。我怎么能让它永远是方形的？

Answer 1

您可以在css和中心文字中设置宽度

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

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

Answer 2

我会获得尽可能大的尺寸并将它们全部设置为至少那么大。然后以“文字”为中心

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

http://jsfiddle.net/zxVhL/4/ - DEMO

Answer 3

您可以尝试明确设置height元素的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;
}

Fiddle

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

3 个答案: