Hintergrundbild-Symbol erscheint nicht auf HTML-Seite

Ich versuche, ein Symbol zu einer Schaltfläche hinzuzufügen, aber aus irgendeinem Grund funktioniert es nicht. Eine andere Webseite mit ähnlichem Code funktioniert. Ich nahm das URL-Bild dieser Seite, steckte es in meinen und es funktioniert nicht.Hintergrundbild-Symbol erscheint nicht auf HTML-Seite

Ich habe das W3C CSS-Validierungswerkzeug verwendet und es wurden keine Fehler angezeigt, die direkt mit diesem Abschnitt zusammenhängen. Ich habe jsfiddle verwendet, um zu sehen, ob das Problem weiterhin besteht, indem ich eine Online-Icon-Font-Bank benutze und es immer noch nicht funktioniert.

hier ist die 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; 
}

und die 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>

, wenn es darauf ankommt, wird die href ausgefüllt, in meinem eigentlichen CSS-Dokument.

Nun, ich weiß der Code funktioniert basierend auf mir in der Lage, die Farbe in ID #RegisterIndividualBTN zu ändern, so dass es richtig aufruft, verstehe ich einfach nicht, warum das Symbol nicht in der HTML-Seite neben erscheint die Taste.

Quelle

2016-04-06 Umeed

Werfen Sie einen Blick auf: https://fortawesome.github.io/Font-Awesome/ – Roy

ich nicht tat sehen Sie irgendwelche Probleme mit Ihrem Code, als ich ihn in JSFiddle löschte & die Pfade aktualisierte. Stellen Sie nur sicher, dass Sie die Symbole auf Ihrem Webserver haben. Es funktionieren sowohl relative Pfade als auch absolute Pfade (aber nur die absoluten arbeiten mit ihrem Logo an jfiddle). Siehe: https://jsfiddle.net/briankueck/se2oesfw/ – Clomp

@Clomp hmm ich denke, es ist etwas falsch mit meinem CSS als Ganzes. Weil ich versucht habe, deine Icon Links und Satyas zu benutzen und es funktioniert nicht. Das ist so seltsam. – Umeed

ich keine Probleme mit Ihrem Code zu sehen war, als ich es in JSFiddle & die Pfade aktualisiert gesunken. Stellen Sie nur sicher, dass Sie die Symbole auf Ihrem Webserver haben. Beide relativen Pfade & absolute Pfade funktionieren (aber nur die absoluten arbeiten auf jsfiddle mit ihrem Logo). Siehe meine jsfiddle.

Das einzige, was ich geändert habe, ist diese URL-Pfade in der CSS:

#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; 
}

Quelle

2016-04-06 19:24:04 Clomp

Bitte versuchen Sie dies:

Ich denke, Ihre Hintergrundbild URL ist falsch.

ein jsfiddle Erstellt und es funktioniert gut:

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

Quelle

2016-04-06 16:59:13 satya

danke für die Hilfe, ich glaube, das Problem ist mit meinem gesamten CSS-Code, es scheint, etwas verursacht ein Problem, wie ich sowohl Ihre und Clomps Links versucht und die Symbole nicht auf meiner Seite laden. – Umeed

Hintergrundbild-Symbol erscheint nicht auf HTML-Seite

Antwort

Verwandte Themen