1
votes

Comment placer une icône entre deux colonnes bootstrap?

Je voudrais placer une icône, centrée, entre deux colonnes bootstrap qui sont toutes les deux sur une ligne? Les colonnes sont chacune col-6 et cela ne peut pas changer. Je souhaite que cette icône soit toujours entre les deux colonnes sur mobile et sur ordinateur, etc. Comment puis-je y parvenir?

<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>

html css bootstrap-4 frontend

4 commentaires

va probablement avoir besoin d'une solution css où vous utilisez position

figuré autant, peut-être pouvez-vous suggérer une implémentation css?

@Java_Man, vous pouvez peut-être publier un exemple MVCE de votre problème, avec le balisage HTML et CSS pertinent. Ensuite, nous pouvons voir quel type d'icône vous utilisez, où vous le souhaitez, etc.

ajouté du html

3 Réponses :

0
votes

Si vous ne trouvez pas de meilleure solution, j'essaierais d'utiliser:

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

(ou cependant vous avez besoin des dimensions pour remplir la page)

Et puis peut-être fléchir l'icône pour la positionner au centre:

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

Changer le col-X dans Bootstrap fonctionnerait aussi, mais vous avez dit qu'ils ne peuvent pas être modifiés, alors ... j'espère que vous le ferez fonctionner.

0 commentaires

0
votes

En utilisant CSS, vous pouvez faire quelque chose comme:

<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
}

Vous devrez également envisager de repositionner lorsque les colonnes se réduisent sur des appareils plus petits, donc en utilisant une requête multimédia et en plaçant l'icône en bas de la première colonne à la place.

0 commentaires

1
votes

Vous pouvez appeler font awesome directement depuis css en utilisant l'unicode. Si vous donnez au div un id , vous pouvez utiliser :: after pour ajouter l'icône comme ceci:

<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>

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

0 commentaires