title: Customizing css file to display icon
body: <p>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: <em>/static/img/logo.jpg</em></p>
  
  <p>First of, my code loads the bootstrap css file first, then my custom css file.</p>
  
  <p>Then my html file references this:</p>
  
  <pre><code>...
  
  &lt;div class="page-header" &gt;
      &lt;div class="container"&gt;
      &lt;h1&gt;&lt;a href="https://mywebsite.com"&gt;&lt;i class="icon-logo"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/h1&gt;
  
  ...
  </code></pre>
  
  <p>My css file so far contains this:</p>
  
  <pre><code>...
  
  .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;
  }
  
  ...
  </code></pre>
  
  <p>What should I add to the css file to customise and display the logo?</p>