lorsque j'ajoute la feuille de style bootstrap, le png en haut à gauche devient invisible

Question

Le formatage de mon image (.png) fonctionne bien, mais dès que j'ajoute la bibliothèque bootstrap au html, l'image devient invisible mais le lien fonctionne toujours.

CSS :

.menu-icon img {
      width: 14vw;
      height: 5vh;
      padding-bottom: 20%;
      padding-top: 10%;
      padding-left: 4%;
      position: block;
    }

HTML :

<a href="index.html" class="menu-icon">
<img src="img/image.png">
</a>

Note : L'autre image .png fonctionne toujours, mais elle est plus petite et se trouve en bas du menu. .

Answer 1

Si vous changez la hauteur en pixels et modifiez la taille de la boîte, cela fonctionnera même avec bootstrap :

<style type="text/css">
       .menu-icon img {
           width: 14vw;
           height: 55px;
           padding-bottom: 20%;
           padding-top: 10%;
           padding-left: 4%;
           position: block;
           box-sizing: content-box !important;
       }
</style>

Answer 2

Bootstrap CSS écrase votre code CSS.

Vous devez forcer html à travailler avec votre CSS en utilisant !important vous pouvez procéder comme suit :

<a href="index.html" class="menu-icon">
<img src="img/image.png" style="width: 14vw !important;"> <!-- do the rest of styling yourself while adding !important
</a>

Ou le faire en CSS comme @kblau l'a suggéré :

.menu-icon img {
       width: 14vw;
       height: 55px;
       padding-bottom: 20%;
       padding-top: 10%;
       padding-left: 4%;
       position: block;
       box-sizing: content-box !important;
   }