如何爲不同大小的符號創建相同大小的邊框？

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

你可以嘗試設置i元素的height和width明確，使之方有使用: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

Answer 2

您可以在CSS和中心文本

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

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

Answer 3

我只想得到最大可能的大小和設置他們都至少是大組的寬度。然後中心的「文本」

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

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