自定义css文件以显示图标

Question

我一直在尝试自定义图标以在标题中显示徽标，但我不知道如何为此正确设置我的 css 文件。我正在使用 Bootstrap，徽标存储在我的静态文件夹中：/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

但我认为你不想替换图标，所以如果你不想显示你的标志，然后设置它的样式，你可以这样设置你的 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

应该没问题的。