Custom Image within LI Toolbar in HTML/CSS - html

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">menu</li>
<li title="search">search</li>
<li title="pencil">pencil</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.

Answer 1

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">menu
</li>
<li title="search">search
</li>
<li title="pencil">pencil
</li>
<li title="about">about
</li>
<li title="archive">archive
</li>
<li title="contact">contact
</li>
</ul>
<ul class="menu-bar">
<li>Menu
</li>
<li>Home
</li>
<li>Profile
</li>
<li>Editorial
</li>
<li>About
</li>
</ul>