- Affected Version
- WoltLab Suite 5.2
Ich würde gerne in die Labels Icons machen ICON - Text kann mir wer verraten wie das im CSS aussehen muss? Es sind PNG Icons.
Icon im Label vor Text
- LRDE
- Thread is marked as Resolved.
-
CSS
Display More.x1:before { content: "\f003"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right:5px; } .x1, a.x1{ background-color: #FFBF00 !importent; color: #ffffff !importent; }Damit ?
-
Ach du meinst, so wie woltlab es hat. Diesen WSC Icon/Bild
CSS
Display More// Label XXXXX .badge.labelXXXXX::before { background-image: url(http://url.de/pfad/zur/grafik/xxxxx.png); // URL des Bildes } // Label YYYYY .badge.labelYYYYY::before { background-image: url(http://url.de/pfad/zur/grafik/yyyyy.png); // URL des Bildes } // Alle betroffenen Labels (via Komma getrennt) .badge.labelXXXXX::before, .badge.labelYYYYY::before { width: 16px; // Breite anpassen height: 16px; // Höhe anpassen margin-right: 5px; // Abstand zwischen Grafik und Text anpassen content: ""; display: inline-block; vertical-align: text-top; } // Alle betroffenen Labels (via Komma getrennt) .badge.labelXXXXX, .badge.labelYYYYY { background-color: rgba(0, 0, 0, 0); // Hintergrundfarbe anpassen (aktuell transparent) color: rgba(0, 0, 0, 1); // Farbe vom Text anpassen padding: 0; }Wahrscheinlich eins von den beiden Codes
-
So möchte ich das haben, die Codes schaue ich mir mal an... Es geht hier nicht um Benutzerränge oder so was. Ich meine die Labels welche man in Foren und so nutzen kann =)
-
Sowie ich es probiert habe mit diesem code, kann man das im foren auch nutz bzw Labels. Muss schon sagen schaut komisch aus.
Schau dir erstmal an
-
Content
Du hast da Leerzeich drin, So "", nicht " "
-
Oh nice, hat dir doch was gebracht mit den codes bzw die beiden.
Sehr Cool
werde es auch mal testen
-
Jemand eine Idee wie ich die Schrift weiter nach oben, also mittig bekomme?
-
CSS
Display More.asb, a.badge.label.asb { background-color: #FFD813; color: #C80A14; padding: 5px; &::before { background-image: URL(/images/labels/asb.png); background-repeat: no-repeat; // nicht wiederholen width: 100px; // Breite anpassen height: 42px; // Höhe anpassen margin-right: 5px; // Abstand zum Text margin-left: 5px; // Abstand aussen content: ""; display: inline-block; vertical-align: text-center; } }a.badge.label.asb ergänzt. Da es sonst in der Übersicht nicht mehr gültig ist
So sieht es dann jetzt bei mir aus, leider fehlt mir noch die Möglichkeit aus Icon im Label vor Text
-
CSS
text-align: center;CSS
Display More.asb, a.badge.label.asb { background-color: #FFD813; color: #C80A14; padding: 5px; &::before { background-image: URL(/images/labels/asb.png); background-repeat: no-repeat; // nicht wiederholen width: 100px; // Breite anpassen height: 42px; // Höhe anpassen margin-right: 5px; // Abstand zum Text text-align: center; // Text Mittig angezeigt margin-left: 5px; // Abstand aussen content: ""; display: inline-block; vertical-align: text-center; } } -
-
Das müsste ich dann wenn nach oben setzen nicht zum icon den das sitzt so wie es ist richtig
teste ich später mal -
Das Icon ist so geblieben bei mir & der text war mittig
-
So müsste das eig gehen für dich
hab mein bestes getan & versucht. -
Passt Perfekt danke =)
Kein Problem
-
Participate now!
Don’t have an account yet? Register yourself now and be a part of our community!
