向菜单项添加图标 - 图标未正确显示，css 问题

Question

我正在尝试向我的菜单项添加图标。我已经阅读了许多不同的教程，但是所有教程推荐的 css 都不适合我，我不知道该怎么做。

这是我的html和css：

<div class="hike-menu">
  <ul>
    <li class="icon">Menu Item 1</li>
    <li class="icon">Menu Item 2</li>
    <li class="icon">Menu Item 3</li>
    <li class="icon">Menu Item 4</li>
  </ul>
</div>

ul li {
  list-style-type: none;
  display: inline-block;
}

.icon {
  background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
  background-repeat: no-repeat;
  background-position: top;
}

如果你想看一下，我也上传到了一个 jfiddle。您可以看到图标未显示的确切问题。 https://jsfiddle.net/katherinekonn/g1e4cok3/5/

我还应该注意，我绝对有必要为此使用背景图像，我无法将 img 链接直接放入 html 中。有谁知道我该如何解决？我希望图标位于列表项文本上方。

这是我正在尝试创建的图像：

Answer 1

主要问题与您使用的图标大小有关。实际尺寸比您要求的要大得多。因此，要么调整图像大小，要么在 css 中应用背景图像大小。然后为<LI> 应用一些 padding-top 以避免文本和图标重叠。

我尝试在小提琴中修改你的 css，它对我来说很完美。请看下面

ul li {
  list-style-type: none;
  display: inline-block;
}

.icon {
  background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: top;
  padding-top: 30px;
}

Answer 2

请试试这个。它会起作用的。

HTML

<div class="hike-menu">
  <ul>
    <li class="element">
      <div class="icon">
      </div>
       <div class="text">
         Menu Item 1
       </div>
     </li>
    <li class="element">
      <div class="icon">
      </div>
       <div class="text">
         Menu Item 2
       </div>
     </li>
     <li class="element">
      <div class="icon">
      </div>
       <div class="text">
         Menu Item 2
       </div>
     </li>
     <li class="element">
      <div class="icon">
      </div>
       <div class="text">
         Menu Item 2
       </div>
     </li>
  </ul>
</div>

CSS

ul li {
  list-style-type: none;
  display: inline-block;
}

.icon {
  background-image: url("https://i.postimg.cc/ZWW7qTmm/calendar-yellow-copy.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}

.text {
  display: block;
}