Bootstrap 4 выравнивает значок Font Awesome по горизонтали и вертикали

Question

Я использую Bootstrap 4 и пытаюсь выровнять значок Font Awesome по горизонтали и вертикали.Я хочу использовать только встроенный в Bootstrap 4 CSS, но не пользовательский CSS.

Мне удалось отцентрировать его по вертикали, используя align-self-center, но по горизонтали justify-content-center не работает, значок по-прежнемувыровнено по левому краю.

  <div class="row">
    <div class="col-6">
      <h2 class="text-left">Heading 2</h2>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
    </div>

    <div class="col-6 align-self-center justify-content-center">
      <i class="far fa-thumbs-up fa-10x"></i>
    </div>
  </div>

Answer 1

попробуйте добавить text-center вместо justify-content-center

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" >


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
    <div class="col-6">
      <h2 class="text-left">Heading 2</h2>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan sit amet augue eu suscipit. Maecenas rutrum, mauris nec porta euismod, ligula augue facilisis purus, non ultricies mi nulla lacinia velit. Ut vitae varius odio, vel pharetra nisi. Nam porta, ex eu ornare sollicitudin, erat erat elementum ligula, aliquet commodo.</p>
    </div>

    <div class="col-6 align-self-center text-center">
      <i class="far fa-thumbs-up fa-10x"></i>
    </div>
  </div>