Personnalisation du fichier css pour afficher l'icône

Question

J'ai essayé de personnaliser une icône pour afficher un logo dans mon en-tête, mais je ne sais pas comment configurer correctement mon fichier css pour cela. J'utilise Bootstrap et le logo est stocké dans mon dossier statique: /static/img/logo.jpg

D'abord, mon code charge le fichier css d'amorçage, puis mon fichier css personnalisé.

Ensuite mes références de fichier html ceci:

... 

<div class="page-header" > 
    <div class="container"> 
    <h1><a href="https://mywebsite.com"><i class="icon-logo"></i></a></h1> 

... 

Mon fichier css donc contient beaucoup ceci:

... 

.page-header { 
    height: 60px; 
    margin-top: 0px; 
    background: red; 
    color: black; 
    font-size: 15px; 
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    z-index: 11; 
} 

.container { 
    width: 100; 
    height: 100; 
} 

.container h1 { 
    display: inline-block; 
    position: relative; 
    top: 0; 
    color: white; 
    font-size: 20px; 
    line-height: 20px; 
    font-weight: normal; 
} 

a { 
    position: center; 
    color: white; 
    text-decoration: none; 
} 

a:hover { 
    color: white; 
    text-decoration: underline; 
} 

... 

Que dois-je ajouter au fichier css pour personnaliser et afficher le logo?

Answer 1

Je ne comprends pas exactement ce que vous ne voulez pas faire.

Si vous voulez le style de l'icône, il suffit d'appliquer votre CSS que: .page-header .container h1 a i

Mais je pense que vous wan't pour remplacer l'icône, donc si vous wan't pour afficher votre logo, puis le style , vous pouvez définir votre code html comme ça:

<div class="page-header" > 
    <div class="container"> 
     <h1><a href="https://mywebsite.com"><img src="/static/img/logo.jpg" alt"logo"> 
     </a></h1> 
    </div> 
</div> 

Et puis appliquez votre style à .page-header .container h1 a img

Et il devrait être bien.