アイコンを表示するように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場合は、その後、スタイル

<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

にあなたのスタイルを適用し、それは問題ないはずです：それは、あなたはそのようなあなたのhtmlを設定することができます。