Question

我试图在按钮上添加一个图标，但由于某种原因它无法正常工作。具有类似代码的另一个网页确实有效。我把那个页面的网址图片插入我的网页，但它无法正常工作。

我使用过W3C CSS验证工具，但它没有显示与该部分直接相关的任何错误。我使用jsfiddle来查看问题是否仍然存在使用一些在线图标字体库并且它仍然无法正常工作。

这是css：

.registration-buttons {
    float:none;
    width:100%;
    max-width:275px;
    height:40px;
    display:block;
    background:rgb(0,121,192);
    color: white !important;
    font: 16px/40px "Rockwell W01","Rockwell",Georgia,Courier,serif !important;
    -moz-box-sizing: border-box;
    padding-left: 70px;
    margin-bottom: 1%;
}
    .registration-buttons:hover {
        background:rgb(0,152,242);
    }

#StartTeamBTN {
    background-image:url(../custom/SLOPES_BC/images/gui/start-team-icon.jpg);
    background-repeat:no-repeat;
}
#JoinTeamBTN {
    background-image:url(../custom/SLOPES_BC/images/gui/join-team-icon.jpg);
    background-repeat:no-repeat;
}

#RegisterIndividualBTN {
    background-image:url(../mResponsive/images/register-individual-icon.jpg);
    background-repeat:no-repeat;
}

和HTML：

<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>

<a class="registration-buttons" id="RegisterIndividualBTN" href="">Register as an Individual</a>

<a class="registration-buttons" id="StartTeamBTN" href="">
Start a Team</a>

<a class="registration-buttons" id="JoinTeamBTN" href="">Join a Team</a>

</p>

如果重要，则在我的实际css文档中填写href。

现在，我知道代码的工作原理是我能够更改ID #RegisterIndividualBTN中的颜色，所以它正确地调用它，我只是不明白为什么图标没有出现在按钮旁边的html页面中。

Answer 1

请试试这个：

我认为您的背景图片网址不正确。

创建了一个jsfiddle，它运行正常：

 ----      https://jsfiddle.net/Ljt1bt90/6/

Answer 2

当我将代码放入JSFiddle＆amp ;;时，我没有看到任何代码问题。更新了路径。只需确保您的Web服务器上有图标。两条相对路径和绝对路径有效（但只有绝对路径可以在jsfiddle上使用它们的标识）。查看我的jsfiddle。

我唯一改变的是CSS中的这些URL路径：

#StartTeamBTN {
    background-image:url(https://jsfiddle.net/img/logo@2x.png);
    background-repeat:no-repeat;
}

#JoinTeamBTN {
    background-image:url(https://jsfiddle.net/img/logo@2x.png);
    background-repeat:no-repeat;
}

#RegisterIndividualBTN {
    background-image:url(https://jsfiddle.net/img/logo@2x.png);
    background-repeat:no-repeat;
}

背景图片图标未显示在HTML页面上

2 个答案: