phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

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

https://www.phpbb.de/community/viewtopic.php?t=241018

Seite 1 von 2

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

Verfasst: 14.02.2018 16:19
von 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

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

Verfasst: 14.02.2018 16:41
von Melmac
Das muss ich jetzt gleich mal ausprobieren - der Ansatz gefällt mir jedenfalls schonmal :grin:

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

Verfasst: 04.09.2018 12:54
von Tastenplayer
Der Link hat sich leider verabschiedet :cry:

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

Verfasst: 04.09.2018 13:10
von Melmac
Probiere es mal hier => http://forumstyling.bplaced.net/viewtop ... f=56&t=288

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

Verfasst: 13.11.2018 12:13
von 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)

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

Verfasst: 14.11.2018 08:38
von Lehrling
Ja, da war tatsächlich ein Fehler im Stylesheet. Danke für den Hinweis. Ich habe das jetzt korrigiert.

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

Verfasst: 16.11.2018 18:20
von Tastenplayer
Ausserdem muss man beachten, dass jetzt logischerweise die Beitragssymbole hinter dem Font Awesome Icon verschwinden. Hatte ich definitiv nicht dran gedacht :oops: . [ 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.

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

Verfasst: 21.02.2019 13:27
von 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. :-?

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

Verfasst: 21.02.2019 13:45
von 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.

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

Verfasst: 21.02.2019 19:22
von 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:
Tastenplayer hat geschrieben: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.
Alle Zeiten sind UTC+02:00
Seite 1 von 2

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de