定製css文件來顯示圖標

Question

我一直在試圖定製一個圖標來顯示我的標題中的徽標，但我不知道如何正確設置我的css文件。我使用的是引導，而標誌是存儲在我的靜態文件夾：/static/img/logo.jpg的

首先，我的代碼加載引導css文件第一，然後我的自定義CSS文件。

然後我的HTML文件引用此：

... 

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

... 

我的CSS文件，到目前爲止包含此：

... 

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

... 

我應該添加到CSS文件來定製和顯示標誌？

Answer 1

我不明白你到底想做什麼。

如果你想要的風格的圖標，只是採用你的CSS到：.page-header .container h1 a i

但我認爲你wan't替換圖標，所以如果你wan't顯示您的標誌，然後風格它，你可以設置你的HTML這樣的：

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

，然後應用你的風格.page-header .container h1 a img

它應該是罰款。