How to give a fixed size to fontawesome icons

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;  
}