Q:

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

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? 

A:

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

