Как разместить значок между двумя столбцами bootstrap?

Question

Я хотел бы разместить значок по центру между двумя bootstrap столбцами, которые находятся в одной строке? Столбцы имеют столбцы col-6 и не могут быть изменены. Я бы хотел, чтобы этот значок всегда находился между двумя столбцами на мобильном устройстве и на рабочем столе и т. Д. c. Как я могу выполнить sh это?

<a class="row bg-light" href="#">
    <div class="col-lg-6 ">
        <!-- stuff -->
    </div>

    I want an Icon here like: <i class="fa-bla"></i>

    <div class="col-lg-6 ">
        <!-- stuff -->
    </div>
</a>

Answer 1

Вы можете вызвать font awesome прямо из css, используя юникод. Если вы укажете div и id, вы можете использовать ::after, чтобы добавить значок следующим образом:

#stuff::after {
  font-family: "FontAwesome";
  content: "\f007";
  vertical-align: middle;
}

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

<a class="row bg-light" href="#">
  <div id="stuff" class="col-lg-6 ">
    <!-- stuff -->
  </div>
  <div class="col-lg-6 ">
    <!-- stuff -->
  </div>
</a>

Answer 2

Используя CSS, вы можете сделать что-то вроде:

<a class="row bg-light" href="#">
    <div class="col-lg-6 has-icon">
        <!-- stuff -->
        <i class="fa-bla"></i>
    </div>
    <div class="col-lg-6">
        <!-- stuff -->
    </div>
</a>

.has-icon {
    position: relative;
}
.has-icon i {
    position: absolute;
    top: 50%;
    margin-top: -10px; // half of the icon's height 
    left: -10px; // will need adjusting to preference
}

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

Answer 3

Если вы не найдете лучшего решения, я бы попытался использовать:

display: grid;
grid-template-columns: 45% 5% 45%;

(или, как бы то ни было, вам нужны размеры, чтобы заполнить страницу)

И затем, возможно, согните значок, чтобы расположить его по центру:

display: flex;
justify-content: center;
align-items: center;

Изменение col-X в Bootstrap тоже сработает, но вы сказали, что их нельзя изменить, так что ... я надеюсь вы заставляете его работать.