Значки Fontawesome должны располагаться рядом друг с другом по горизонтали

#html #css #icons #alignment #font-awesome

Вопрос:

Мне нужно, чтобы 3 квадратных значка fontawesome были рядом друг с другом. Я не могу понять, как расположить их рядом друг с другом по горизонтали, и я попробовал отобразить:встроенный блок

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

 

Пожалуйста, включите скрипку или кодовый код, если это возможно! Большое спасибо 🙂

Ответ №1:

Вы должны просто сделать это и удалить inline_block

 .fa {
      display: flex;
 }
 

Если вы хотите чего-то еще, скажите, что вы хотите сделать.

Комментарии:

1. и вы можете удалить a text-align: center; и использовать это -> > align-item:center; .

2. Вместо того, чтобы добавлять его в .fa, мне пришлось добавить его в класс, который содержал все значки —> вот где я ошибался для всех, кому это нужно 😀