html - 无法让内联图标显示在 CSS 中

Question

我有一个非常简单的 Chrome 扩展程序来补充网页。其中一项功能是添加链接以在互联网上观看相关比赛。相关的 HTML 在这里:

<div class="option-wrap">
    <a class="option" href="http://www.google.com" target=_blank>
        <div class="option-icon tv-icon"></div>
        TV Link
    </a>
</div>

在这里使用我的 CSS:

.tv-icon {
    margin-right: 2px;
    float: left;
    width: 10px;
    height: 10px;
    background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png") no-repeat;
    display: inline-block;
}

您会看到 HTML 中出现了几个不在我的 CSS 中的类；它们来自现有的网页。此代码的目标是让 URL 指定的电 View 标内联显示在文本“TV Link”的右侧。当我运行代码时，似乎为图标分配了空间，并且光标可以点击该空间，但没有可见的图标。我的 CSS 是否有问题< 或者这是我必须找到解决方法的现有网页代码的功能吗？

这是一个 JSFiddle使用上述代码。

Answer 1

.tv-icon {
    margin-right: 2px;
    float: left;
    width: 20px;
    height: 20px;
    background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
}

JSFiddle

我所做的改变:

• 删除“背景图像”中的“不重复”
• 添加“背景大小”和“背景重复”

我也改变了尺寸。如果需要，请将其改回。