Fontawesome 图标需要水平相邻

Question

我需要 3 个字体精美的方形图标并排放置。我不知道如何让它们水平并排，我试过 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;
}

如果可能，请附上 fiddle 或代码笔！非常感谢:)

Answer 1

您必须只执行此操作并删除 inline_block

.fa {
      display: flex;
 }

如果你还有什么想要的，请说出你想做什么。

Fontawesome 图标需要水平相邻

Fontawesome icons need to be next to each other horizontally

html

css

icons

alignment

font-awesome