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

它应该是罚款。