HTML/CSS中LI工具栏内的自定义图像

Question

所以我一直试图让我的自定义图像出现在垂直工具栏中，但我遇到了麻烦。我参考了http://codepen.io/nikhil/pen/sicrK，它有所有的源代码;我想要几乎相同的工具栏，但使用自定义图像。这里有一个片段，从我一直在努力调整，以获得部分它的工作：

从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> 

从CSS - 前（的作品，如链接）：

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

从CSS - 我试图修改（不工作;出现无图像）

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

所以，我很牛逼试图使用list-style-image，但没有图像会出现。我在文件夹中引用的图像是100x100px。我尝试了background-image，并在HTML标记中使用<img src="newImage.png">，但没有骰子 - 没有图像显示，控制台中也没有记录错误。我该如何解决这个问题？工具栏根据屏幕大小根据CSS重新调整大小，所以我认为这意味着我的图像的大小并不重要。或者，我需要使用SVG吗？感谢任何帮助 - 我是使用CSS的新手。

Answer 1

您误解了Icon Fonts的概念。

如果您想要在伪元素中显示图像，那么您应该使用background属性，就像其他任何元素一样。见来回更Using :before CSS pseudo element to add image to modal

请看看我的代码片段：

$(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>