将图标添加到菜单项-图标无法正确显示，CSS问题

凯瑟琳·米歇尔

我正在尝试向菜单项添加图标。我已经阅读了许多不同的教程，但是所有教程推荐的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中。有谁知道我该如何解决？我希望图标位于列表项文本上方。

这是我要创建的图像：

Pons Purushothaman

主要问题与您使用的图标的大小有关。实际大小比您所需的大得多。因此，您可以调整图像大小或在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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。