Использование Font Awesome с Bootstrap 4
Основная проблема, которую я обнаружил при разработке с помощью Bootstrap 4 и попытке создать кнопку Font Awesome: когда я создаю серию кнопок, я получаю кнопки разного размера, единственный способ получить кнопки одинакового размера - использовать один и тот же шрифт для каждой. one Итак, проблема в том, что размеры Font Awesome не одинаковы для всех.
<a class = "btn btn-outline-warning" type = "button" href = "#">
<i class = "fa fa-edit"></i>
</a>
<a class = "btn btn-outline-danger" type = "button" href = "#">
<i class = "fa fa-trash"></i>
</a>
Есть ли у кого-нибудь практический пример, чтобы решить эту проблему?
Голос против был отдан другим пользователем. Я только добавил дополнительный тег "css", чтобы помочь вашему вопросу охватить больше людей. Следующий ресурс поможет вам улучшить ваши вопросы и снизить количество голосов против ... meta.stackexchange.com/help/how-to-ask
Ответы 3
Можно перейти к размеру:
и выберите значок и прочтите значок использования
Как следует из названия, их значки - не что иное, как «прославленные» шрифты. Таким образом, вы можете изменять их размеры с помощью встроенного CSS; или, что еще лучше, через внешнюю таблицу стилей CSS.
Вы можете изменить класс fa, введя:
.fa{
font-size: 15px !important;
}
Просто замените 15px на то, что вам подходит. Помимо px, вы также можете использовать em. Кроме того, убедитесь, что вы включили !important, чтобы переопределить запись таблицы стилей CSS Bootstrap.
Вы также можете изменить конкретный значок / шрифт, указав определенный класс следующим образом:
fa fa-edit{
font-size: 15px !important;
}
Если вы являетесь автором своей собственной темы, я уверен, что вы знаете, как работают таблицы стилей, а также приоритеты и т. д. Если нет, то вам следует сначала создать Дочерняя тема, а затем изменить только дочернюю тему. Если вы измените родительскую тему, ваши изменения будут отменены, когда Автор темы выпустит обновление.
Хотя вы, безусловно, можете вручную настроить размер шрифта своих значков Font Awesome, я бы предложил менее драматичный подход: .fa-fw. Это служебный класс, который является частью таблицы стилей Font Awesome и помогает унифицировать ширину ваших шрифтов. Согласно документации 4.7.0:
Use
fa-fwto set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel = "stylesheet">
<link href = "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type = "text/css" rel = "stylesheet">
<script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type = "text/javascript" src = "//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<a class = "btn btn-outline-warning" href = "#">
<i class = "fa fa-fw fa-edit"></i>
</a>
<br>
<a class = "btn btn-outline-danger" href = "#">
<i class = "fa fa-fw fa-trash"></i>
</a>
<br>
<a class = "btn btn-outline-success" href = "#">
<i class = "fa fa-fw fa-wrench"></i>
</a>
<br>
<a class = "btn btn-outline-info" href = "#">
<i class = "fa fa-fw fa-stop"></i>
</a>В приведенном выше примере вы можете увидеть, как .fa-fw отрегулировал расстояние между значками, и все выглядит так же. Однако вы могли заметить, что я также удалил type = "button" из вашего тега привязки, поскольку это приводило к тому, что Bootstrap не применял полный CSS объявленного вами ban-outline-*.
@Craig: Я думаю, что мой вопрос не заслуживает отрицательной оценки, потому что он касается реальной проблемы, с которой столкнутся многие люди.