Add icon to menu items - icon not showing properly, css issue

Question

I am trying to add icons to my menu items. I have read many different tutorials on it, but the css that all tutorials recommend will not work for me, and I'm not sure what to do.

Here is my html and 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;
}

And I have also uploaded in onto a jfiddle if you would like to take a look. You can see the exact problem I am having with the icon not showing. https://jsfiddle.net/katherinekonn/g1e4cok3/5/

I should also note that it is absolutely necessary I use background-image for this, I am unable to place an img link directly into the html. Does anyone know how I can fix it? I would like the icon to be above the list items text.

Here is an image of what I am trying to create:

Answer 1

The main issue is related to the size of the icon you used. The actual size is much bigger than you required. So either you resize the image or apply background image size in css. Then apply some padding-top for the <LI> to avoid overlapping of text and icon.

I tried modifying your css in fiddle and it worked perfect for me. please see it below

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

Please try this. It will work.

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;
}