將圖標添加到菜單項-圖標無法正常顯示，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/

我還應注意，為此絕對需要使用background-image，因為我無法將img鏈接直接放置到html中。 有誰知道我該如何解決？ 我希望圖標位於列表項文本上方。

這是我要創建的圖像：

Answer 1

主要問題與您使用的圖標的大小有關。 實際大小比您所需的大得多。 因此，您可以調整圖像大小或在CSS中應用背景圖像大小。 然后為<LI>應用一些填充頂部，以避免文本和圖標重疊。

我嘗試在小提琴中修改您的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;
}