#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, мне пришлось добавить его в класс, который содержал все значки —> вот где я ошибался для всех, кому это нужно 😀