Font Awesome Icons: общий базовый уровень
Я использую Font Awesome 5.0.10 (SVG + JS) для рендеринга нескольких значков социальных сетей.
Если я использую квадратные версии, все они имеют общую базовую линию и, таким образом, выровнены, но неквадратные - нет, как вы можете видеть, посмотрев на расстояние между полем svg и путем на таких значках:
https://fontawesome.com/icons/facebook-f?style=brands
https://fontawesome.com/icons/linkedin-in?style=brands
Я не эксперт по SVG, поэтому я пытаюсь понять, есть ли какой-нибудь простой способ ограничить это нижнее пустое пространство и, таким образом, выровнять все значки по общей базовой линии.
Если вы имеете в виду изменение (через JS) значений атрибута viewBox, это также, похоже, подразумевает изменение отображаемого размера значков, а это не то, что мне нужно ... Кроме того, если бы я должен был сделать для каждого значка Работа по настройке, решение на чистом CSS (например, предложенное mrcharlie) было бы менее болезненным.
Ответы 1
Поскольку вы не можете редактировать файл шрифта напрямую (легко), вам придется вручную сдвигать его для каждого значка, например:
.fa-linked-in {
transform: translateY(1px);
}<i class = "fab fa-linkedin-in"></i>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>Причина, по которой он не выровнен по базовой линии, заключается в том, что он выровнен по центру, поскольку в большинстве случаев это более полезно.
вы можете настроить окно просмотра каждого из них, если вам нужно