图标没有显示在我的项目符号旁边？

Question

我有一个网页，我正在设计，我试图让图标作为项目符号出现在文本前面。相关代码如下：

CSS文件：

.content .bullets { 
    float: left; 
} 

.content .bullets { 
    margin: 5px 0; 
    color: #555; 
    font-weight: 500; 
    text-shadow: 0 1px 1px #fff; 
    width: 400px; 
} 

.content .bullets ul { 
    margin: 0; 
    padding: 0 0 0 5px; 
    list-style: none; 
} 

.content .bullets ul li { 
    padding: 0 0 10px 25px; 
    font-size: 18px; 
    color: #4675b5; 
} 

/* icons */ 
.connect_ico {background: url(/images/Apartment Favicon.png) 0 5px no-repeat;} 
.impress_ico {background: url(/images/resume favicon.png) 0 5px no-repeat;} 
.living_ico {background: url(/images/ThumbsUp Favicon.png) 0 5px no-repeat;} 

的index.html：

<div class="bullets"> 
      <ul> 
       <li class="connect_ico">Example text......</li> 
       <br> 
       <li class="impress_ico">Example Text.....</li> 
       <br> 
       <li class="living_icon">Examples Text......</li> 
      </ul> 
     </div> 

显然，这些都只是代码片段，但我认为他们是相关作品。我已将这些图像上传到FTP服务器上的图像目录，并使用Cyber​​duck（在Mac上）。

谢谢你的帮助。

Answer 1

您肯定需要删除.png图像中的空格。您也可以通过创建一个<ul>，并使用CSS来取代子弹在列表中的图像做在一个更简单的方法：

ul { 
list-style-image: url(images/ThumbsUpFavicon.png); 

}

Answer 2

尝试在图像网址的开头删除/。这是一条绝对路径，你可能想要亲戚。此外，空间可能需要通过反弹逃脱，如下所示：foo\ bar.png