How to give a fixed size to fontawesome icons - html

Question

I created a footer and used fontawesome icons with border.
On the following code I display the items and intend to have them as the picture shows
I was nearly there until I found that when I resize the screen, the icons also shrink like the photo show
Here my styling:
$footer: #464646;
.footer-font-awesome{
font-family: 'FontAwesome';
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid white;
border-radius: 50%;
line-height: 40px;
text-align: center;
font-size: 18px;
text-indent: 0;
}
footer#colophon{
background-color: $footer;
color: white;
padding: 20px 40px;
ul,li,p{
margin: 0;
}
.site-info{
.textwidget {
display: flex;
justify-content: center;
div.box{
display: flex;
width: 100%;
max-width: 25%;
align-items: center;
p{
padding-left:8px;
}
}
.email,
.phone,
.address{
padding-right: 40px;
}
.email{
&:before{
#extend .footer-font-awesome;
content: '\f003';
}
}
.phone{
&:before{
#extend .footer-font-awesome;
content: '\f095';
}
}
.back-top{
justify-content: center;
}
.address{
&:before{
#extend .footer-font-awesome;
content: '\f041';
}
}
}
}
}
Here my html structure:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<section id="black-studio-tinymce-33" class="widget widget_black_studio_tinymce">
<div class="textwidget">
<div class="box email">
<p>Email<br> <span class="unbold"><a>info#web2web.co.za</a></span></p>
</div>
<div class="box phone">
<p>Phone<br> <span class="unbold">021 823 8384</span></p>
</div>
<div class="box address">
<p>Address<br> <span class="unbold">Century City, Cape Town</span></p>
</div>
<div class="box back-top">
<p><span class="unbold"><a class="back-top">To the top</a></span></p>
</div>
</div>
</section>
</div><!-- .site-info -->
</footer>
How can I style my icons as the first pictures shows with no problem even when I resize?
Hope you can edit from my snippet

Answer 1

I would just set min-width on .footer-font-awesome
.footer-font-awesome{
font-family: 'FontAwesome';
display: inline-block;
width: 40px;
min-width: 40px; // This...
height: 40px;
border: 1px solid white;
border-radius: 50%;
line-height: 40px;
text-align: center;
font-size: 18px;
text-indent: 0;
}