Customizing css file to display icon - html

Question

I've been trying to customise an icon to show a logo in my header, but I don't know how to set up correctly my css file for this. I'm using Bootstrap, and the logo is stored in my static folder: /static/img/logo.jpg
First of, my code loads the bootstrap css file first, then my custom css file.
Then my html file references this:
...
<div class="page-header" >
<div class="container">
<h1><i class="icon-logo"></i></h1>
...
My css file so far contains this:
...
.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;
}
...
What should I add to the css file to customise and display the logo?

Answer 1

I don't understand what exactly you wan't to do.
If you want the style the icon, just apply your CSS to that : .page-header .container h1 a i
But I think you wan't to replace the icon, so if you wan't to display your logo, and then style it, you could set your html like that :
<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>
And then apply your style to .page-header .container h1 a img
And it should be fine.