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服务器上的images目录，我正在使用Cyberduck（在Mac上）。

感谢您的帮助。

Answer 1

尝试删除图片网址开头的/。这是一条绝对的道路，你可能想要相对的道路。此外，空格可能需要通过反弹进行转义，如下所示：foo\ bar.png

Answer 2

您肯定需要删除.png图片中的空格。此外，您可以通过创建<ul>并使用css将列表中的项目符号替换为图像来更轻松地执行此操作：

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

}

我的子弹文本旁边没有显示图标？

2 个答案: