Использование Font Awesome с Bootstrap 4 - PullRequest
Новая
       24

Использование Font Awesome с Bootstrap 4

0 голосов
/ 01 мая 2018

Основная проблема, которую я обнаружил при разработке с Bootstrap 4 и при попытке создать кнопку 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>

Есть ли практический пример, чтобы избавиться от этой проблемы?

Ответы [ 3 ]

0 голосов
/ 01 мая 2018

Как следует из их названия, их иконки - не что иное, как «прославленные» шрифты. Таким образом, вы можете изменять их размеры с помощью встроенного CSS; или, что еще лучше, с помощью внешней таблицы стилей CSS.

Вы можете изменить класс fa, введя: 

.fa{
    font-size: 15px !important;
}

Просто измените 15px на все, что подходит. Помимо px вы также можете использовать em. Также убедитесь, что вы включили !important, чтобы переопределить запись в таблице стилей CSS Bootstrap.

Вы также можете изменить определенный значок / шрифт, введя определенный класс следующим образом: 

fa fa-edit{
    font-size: 15px !important;
}

Если вы являетесь автором собственной темы, я уверен, что вы знаете, как работают таблицы стилей, а также приоритеты и т. Д. Если нет, то сначала следует создать дочернюю тему , а затем изменить дочернюю тему только. Если вы измените родительскую тему, ваши изменения будут отменены, когда автор темы выпустит обновление.

0 голосов
/ 01 мая 2018

Хотя вы, безусловно, можете вручную настроить размер шрифта значков Font Awesome, я бы предложил менее драматичный подход: .fa-fw. Это служебный класс, который является частью таблицы стилей Font Awesome, которая помогает унифицировать ширину ваших шрифтов. Согласно документации 4.7.0:

Используйте fa-fw, чтобы установить значки с фиксированной шириной. Отлично использовать, когда разные Значения ширины сбрасывают выравнивание. Особенно полезно в таких вещах, как навигация списки и списки групп. 

<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-*, который вы объявили.

0 голосов
/ 01 мая 2018

Вы можете перейти к размеру:

https://fontawesome.com/icons?from=io

и выберите значок и прочитайте значок использования

...