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>