How to create border of the same size for different size symbols?

Question

I use Font Awesome icons and their fa-border style:

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

But the size of border created depends on the symbol size (see example). How can I make it always square?

score 1 · Answer 1 · answered Mar 28 '14 at 19:22

1

You can set a width in css and center text

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

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

answered Mar 28 '14 at 19:22

G-Cyrillus

101,410
14
105
129

score 1 · Answer 2 · answered Mar 28 '14 at 19:25

1

I would just get the largest possible size and set them all to be at least that large. Then center your "text"

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

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

answered Mar 28 '14 at 19:25

RCNeil

8,581
12
43
61

score 1 · Accepted Answer · answered Mar 28 '14 at 19:33

1

You can try setting the height and width of the i element explicitly, to make it square there is a trick using :after pseudo-element and with that trick, you just need to specify the width (no need to specify the height), this will help you maintain the page better in case you want to change the square size:

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

answered Mar 28 '14 at 19:33

King King

61,710
16
105
130

If you use fa-rotate, you need to specify both width and height of equal values to consistently get a square. If you want non-square rectangles and use fa-rotate, you'll probably need to specify an inline style that applies the "height" and "width" correctly for the context of the rotation you are using. – Kenigmatic Sep 13 '17 at 02:19

How to create border of the same size for different size symbols?

3 Answers3