Fontawesome icons need to be next to each other horizontally-CodePudding

I need 3 fontawesome square icons to be right next to one another. I can't figure out how to get them next to each other horizontally and I've tried display:inline-block

HTML:

 <div class="fa">
                    <a target="_blank" href="https://www.google.co.uk/">
                        <i class="fa fa-linkedin-square fa-3x" aria-hidden="true"></i>
                    </a>
                    <a target="_blank" href="https://www.google.co.uk/">
                        <i class="fa fa-envelope fa-3x" aria-hidden="true"></i>
                    </a>
                    <a target="_blank" href="https://www.google.co.uk/">
                        <i class="fa fa-github-square fa-3x" aria-hidden="true"></i>
                    </a>

                    <script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
                </div>

CSS:

.fa {
    padding-left: 15px;
    margin-top: 20px;
    padding-top: 15px;
    text-align: center;
    list-style-type:none;
}


.fa-linkedin-square {
    opacity: 0.4;
}

.fa-linkedin-square:hover {
    opacity: 1;
}

.fa-envelope {
    opacity: 0.4;
}

.fa-envelope:hover {
    opacity: 1;
}

.fa-github-square {
opacity: 0.4;
}

.fa-github-square:hover {
    opacity: 1;
}

Please include a fiddle or a codepen if possible! Thanks so much :)

CodePudding user response：

You must just do this and remove inline_block

.fa {
      display: flex;
 }

If anything else you want, tell what you want to do.