背景图像图标没有出现在HTML页面

我想添加一个图标到按钮，但由于某种原因，它不工作。另一个具有类似代码的网页确实有效。我把那个页面的URL映像插入我的网站，它不起作用。背景图像图标没有出现在HTML页面

我使用了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>

如果它的事项，该href填充，我实际的CSS文件内。

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

来源

2016-04-06 Umeed

看一看：https://fortawesome.github.io/Font-Awesome/ – Roy

我没有将代码放入JSFiddle并更新路径时，请查看代码中的任何问题。只要确保你的网络服务器上有图标。相对路径和绝对路径都可以工作（但绝对路径和绝对路径都可以在标志上使用jsfiddle）。请参阅：https://jsfiddle.net/briankueck/se2oesfw/ – Clomp

@Clomp嗯，我认为我的CSS整体有问题。因为我尝试使用你的图标链接和Satya的，它不起作用。这太奇怪了。 – Umeed

我没有看到你的代码中的任何问题，当我把它放进的jsfiddle &更新的路径。只要确保你的网络服务器上有图标。两个相对路径&绝对路径的工作（但只有绝对的路径与他们的标志jsfiddle工作）。请参阅我的jsfiddle。

，我已经改变的唯一事情是在CSS这些URL路径：

#StartTeamBTN { 
    background-image:url(https://jsfiddle.net/img/[email protected]); 
    background-repeat:no-repeat; 
} 

#JoinTeamBTN { 
    background-image:url(https://jsfiddle.net/img/[email protected]); 
    background-repeat:no-repeat; 
} 

#RegisterIndividualBTN { 
    background-image:url(https://jsfiddle.net/img/[email protected]); 
    background-repeat:no-repeat; 
}

来源

2016-04-06 19:24:04 Clomp

请试试这个：

我认为你的背景图片url不正确。

创建一个的jsfiddle，它是工作的罚款：

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

来源

2016-04-06 16:59:13 satya

感谢您的帮助，我相信问题出现在我的整个CSS代码中，似乎有些问题会导致问题，因为我已经尝试了您的Clomp链接，并且图标无法加载到我的页面中。 – Umeed

背景图像图标没有出现在HTML页面

回答

相关问题