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

【问题标题】：How to create border of the same size for different size symbols?如何为不同大小的符号创建相同大小的边框？
【发布时间】：2014-05-08 10:02:54
【问题描述】：

我使用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）。我怎样才能让它总是方形的？

【问题讨论】：

标签： css font-awesome font-awesome-4

【解决方案1】：

您可以尝试显式设置i 元素的height 和width，使用:after 伪元素有一个技巧，您只需要指定@ 987654326@（无需指定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

【讨论】：

如果你使用 fa-rotate，你需要指定宽度和高度相等的值来一致地得到一个正方形。如果您想要非方形矩形并使用 fa-rotate，您可能需要指定一个内联样式，以便为您正在使用的旋转上下文正确应用“高度”和“宽度”。

【解决方案2】：

您可以在css中设置宽度和居中文本

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：