[3.1] [3.2] Topic und Forum Icons mit Font Awesome

[Lehrling]

Du möchtest eigene Grafiken für die Forum- und Topic-Icons verwenden, kennst dich aber nicht mit Grafikprogrammen aus und kannst keine eigene erstellen? In diesem Fall kannst du auch die Icons von Font Awesome verwenden. Ich habe das mal mit Icons aus dem medizinischen Bereich gemacht. Mehr dazu: http://www.forumstyling.bplaced.net/vie ... p=413#p413

[Melmac]

Das muss ich jetzt gleich mal ausprobieren - der Ansatz gefällt mir jedenfalls schonmal

[Tastenplayer]

Der Link hat sich leider verabschiedet

[Melmac]

Probiere es mal hier => http://forumstyling.bplaced.net/viewtop ... f=56&t=288

[Tastenplayer]

Ich habe das jetzt mal im 3.2.3 TB Forum mit einem Style versucht.
Allerdings hatte ich nach dem Einfügen der Datei einen Fehler in der PN Anzeige [ externes Bild ]
Erst nach Konfiguration von Icons für die PN Benachrichtigung, stimmte das in meinem Style [ externes Bild ]

Code: Alles auswählen

.topic_moved:before					{ content: "\f047"; color:#0D4F8B; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.pm_read:before						{ content: "\f2b6"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read:before					{ content: "\f07b"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_mine:before				{ content: "\f07b"; color:#4981CE; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot:before				{ content: "\f07c"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot_mine:before			{ content: "\f07c"; color:#4981CE; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
									  
.topic_read_locked:before			{ content: "\f114"; color:#222222; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_locked_mine:before		{ content: "\f115"; color:#4981CE; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.pm_unread:before					{ content: "\f0e0"; color:#BF0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread:before				{ content: "\f07b"; color:#BF0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_mine:before			{ content: "\f07b"; color:#FF7F50; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_hot:before			{ content: "\f07c"; color:#bf0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_hot_mine:before		{ content: "\f07c"; color:#FF7F50; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_locked:before			{ content: "\f114"; color:#bf0000; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_locked_mine:before	{ content: "\f115"; color:#FF7F50; font-family: 'FontAwesome';  position: absolute; top: 20%; font-size: 25px; left: 15px; }

[ externes Bild ] (Die mini Icon Legende stimmt allerdings noch nicht so ganz überein)

[Lehrling]

Ja, da war tatsächlich ein Fehler im Stylesheet. Danke für den Hinweis. Ich habe das jetzt korrigiert.

[Tastenplayer]

Ausserdem muss man beachten, dass jetzt logischerweise die Beitragssymbole hinter dem Font Awesome Icon verschwinden. Hatte ich definitiv nicht dran gedacht . [ externes Bild ]

Code: Alles auswählen

dl.row-item dt {
	background-repeat: no-repeat;
	background-position: 24px 50%;		/* Position of topic icon */
	background-size: 18px;
}

Oder oben rechts [ externes Bild ]

Code: Alles auswählen

dl.row-item dt {
    background-repeat: no-repeat;
    background-position: 12px 10%;
    background-size: 18px;
}

Diese Beitragssymbole sollte man sowieso für jeden Style separat konfigurieren können. Einige erkennt man nicht in jedem Style.

[couchpilot]

Dankeschön Lehrling für diese klasse Möglichkeit Font Awesome Icons als Topic/Forum icons zu integrieren.

Ich hab dazu mal ne Frage, - wie kann man die Themen Symbole eine Ebene vor den fa icons erscheinen lassen ? Im Moment erscheinen sie versetzt dahinter. Also ich möchte das so, dass die Themen Symbole die fa icons überlappen und nicht anders herum ?

Denn ich möchte die fa icons ungerne weiter nach rechts versetzen und beide icons nebeneinander haben. Ich hab schon versucht aus dem "before" ein "behind" zu machen, aber dann sind die fa icons ganz verschwunden, wahrscheinlich liegen sie dann hinter dem background.

Die Codeschnipsel von Tastenplayer helfen mir da überhaupt nicht weiter, da ich nicht weiß ob es der Originalcode ist oder der bearbeitete, aus welchen Dateien sie kommen und was sie bewirken.

[Tastenplayer]

Hallo Couchpilot
Wenn ich Dich recht verstanden habe, willst Du das machen [ externes Bild ]
Das geht nicht, denn die Font-Awesome Icons kommen immer über das Symbol respektive das Symbol verschwindet hinter dem Font Awesome Icon.
Jedenfalls bei mir war das so. Du kannst sie aber versetzt machen - also dass das Symbol oben rechts über dem Font Icon ist. [ externes Bild ] Beim breitesten/höchsten Font Icon anpassen. Es hat genug Platz oben, dass Du die da noch hinsetzen kannst.
Leider sind diese Beitragssymbole ja im Acp (phpBB) konfiguriert und nicht im Style. Also für alle Styles die gleichen.

[couchpilot]

Schade das da kein Anderer eine Idee hat wie das vielleicht doch noch zu realisieren ist.

Dann bitte ich Dich darum Deine Lösung zu konkretisieren. Ich nehme mal an dieses hier ist Dein Lösungsansatz für den Fall:

Oder oben rechts [ externes Bild ]

Code: Alles auswählen
dl.row-item dt {
background-repeat: no-repeat;
background-position: 12px 10%;
background-size: 18px;
}

Dann schreibe doch bitte noch die vollständige Pfadangabe dazu wo ich das ändern muß, damit ich mir das mal anschauen kann.