Custom Image within LI Toolbar in HTML/CSS

Question

So I've been trying to get my custom image to appear in a vertical toolbar, but I'm having trouble. I'm referencing http://codepen.io/nikhil/pen/sicrK which has all of the source code; I want pretty much the same toolbar, but with custom images. Here's a snippet, from the part I've been trying to adjust to get it to work:

From the HTML:

<ul class="menu">
  <li title="home"><a href="#" class="menu-button home">menu</a></li>  
  <li title="search"><a href="#" class="search">search</a></li>
  <li title="pencil"><a href="#" class="pencil">pencil</a></li>
<ul>

From the CSS - before (works, as in the link):

.menu li a.search:before {
  content: "\f002";
}

From the CSS - with my attempted modification (doesn't work; no image appears)

.menu li a.search:before {
  list-style-image: "\newImage.png";
}

So, I was trying to use list-style-image, but no image would appear. The image I'm referencing in the folder is 100x100px. I tried background-image and just using <img src="newImage.png"> inside the HTML markup, but no dice - no image appears and there are no errors logged in the console. How can I resolve this issue? The toolbar re-sizes according to the CSS based on the screen size, so I assume that means the size of my image doesn't really matter. Or, do I need to be using an SVG instead? Thanks for any help - I'm new to working with CSS.

did you use `background-size` `background-position` when you tried `background-image`? Sometimes you just need some `height` on those and they pop up. Also the `\f002` is calling this font: https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L274. You shouldn't emulate that format when calling images in CSS. ( \ should be: / ) `"./img/my-image.png"` — s0rfi949, Jul 19 '15 at 19:13

score 1 · Accepted Answer · edited May 23 '17 at 10:24

You are misunderstanding the concept of Icon Fonts.

If you want to display an image in a pseudo-element, then you should use background property, just as with any other element. See fro more Using :before CSS pseudo element to add image to modal

Please have a look at my snippet:

$(document).ready(function() {
  $(".menu-button").click(function() {
    $(".menu-bar").toggleClass("open");
  })
})

.menu,
.menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  z-index: 10;
  overflow: hidden;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li a {
  display: block;
  text-indent: -500em;
  height: 5em;
  width: 5em;
  line-height: 5em;
  text-align: center;
  color: #72739f;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}
.menu li a:before {
  font-family: FontAwesome;
  speak: none;
  text-indent: 0em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4em;
}
.menu li a.search:before {
  content: '';
  background: url("http://piq.codeus.net/static/media/userpics/piq_162172_400x400.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* content: "\f002"; */
}
.menu li a.archive:before {
  content: '';
  background: url("http://i.imgur.com/HsZNOfb.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* content: "\f187"; */
}
.menu li a.pencil:before {
content: '';
  background: url("http://thepunkeffect.com/wp-content/uploads/2013/11/01-03.jpeg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* content: "\f040"; */
}
.menu li a.contact:before {
  content: "\f003";
}
.menu li a.about:before {
  content: "\f007";
}
.menu li a.home:before {
  content: "\f039";
}
.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
  background: #267fdd;
  color: #fff;
}
.menu-bar {
  overflow: hidden;
  left: 5em;
  z-index: 5;
  width: 0;
  height: 0;
  transition: all 0.1s ease-in-out;
}
.menu-bar li a {
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  color: #72739f;
  text-decoration: none;
  position: relative;
  font-family: verdana;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}
.menu-bar li:first-child a {
  height: 5em;
  background: #267fdd;
  color: #fff;
  line-height: 5
}
.para {
  color: #033f72;
  padding-left: 100px;
  font-size: 3em;
  margin-bottom: 20px;
}
.open {
  width: 10em;
  height: 100%;
}
@media all and (max-width: 500px) {
  .container {
    margin-top: 100px;
  }
  .menu {
    height: 5em;
    width: 100%;
  }
  .menu li {
    display: inline-block;
    float: left;
  }
  .menu-bar li a {
    width: 100%;
  }
  .menu-bar {
    width: 100%;
    left: 0;
    height: 0;
  }
  .open {
    width: 100%;
    height: auto;
  }
  .para {
    padding-left: 5px;
  }
}
@media screen and (max-height: 34em) {
  .menu li,
  .menu-bar {
    font-size: 70%;
  }
}
@media screen and (max-height: 34em) and (max-width: 500px) {
  .menu {
    height: 3.5em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<ul class="menu">

  <li title="home"><a href="#" class="menu-button home">menu</a>
  </li>

  <li title="search"><a href="#" class="search">search</a>
  </li>
  <li title="pencil"><a href="#" class="pencil">pencil</a>
  </li>
  <li title="about"><a href="#" class="active about">about</a>
  </li>
  <li title="archive"><a href="#" class="archive">archive</a>
  </li>
  <li title="contact"><a href="#" class="contact">contact</a>
  </li>
</ul>

<ul class="menu-bar">
  <li><a href="#" class="menu-button">Menu</a>
  </li>
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Profile</a>
  </li>
  <li><a href="#">Editorial</a>
  </li>
  <li><a href="#">About</a>
  </li>
</ul>

Custom Image within LI Toolbar in HTML/CSS

1 Answers1