Yes, there seem to be conflicts over the two versions. But you can insert the font awesome 5 icon codes in the html but not in the css. Somehow it should work like this.
https://stackoverflow.com/questions/496 ... ot-showing
Only on the quick it did not work so far.
The difficulty is with this solution:
How exactly do you have to put this in the overall_header and the stylesheet or in the style.css so that it also works in phpBB style.
It may not be possible at all, because there are already font awesome links inserted.
Edit:
It seems, that we must insert the code like this
content: '\f35a';
and not as before like this
content: "\f35a";
In the Graphit almost every icon is displayed in the lastsubject with this code. But some of them just look a bit strange. Not as before although they are displayed from 4.7 because they look completely different in 5.0.13. But the fa-reply don't work in this code.
Code: Select all
.icon.fa-external-link-square::before {
content: '\f206';
color: silver;
font-size: 12px;
}
Edit2:
Okay, I have the correct solution.
If one Icon is not displayed go to the font awesome 5
https://www.w3schools.com/icons/fontawe ... arrows.asp
Search the desired icon - in my case the fa-reply -

- insert in the content above
f3e5
and soon the reply icon is displayed again.
Actually logical, but if you're not a specialist, you have to get the idea first that you have to leave out the front three characters so that you can insert the icon into the css.
(some icons, however, must be omitted respectively replaced by another)
Let's see if this also works in style Simple. Whether this also works in Blackfog...
- blackfog_reply2.jpg (7.04 KiB) Viewed 869 times
Why the 4.7 clipboard icon looks so strange now is written in the stars. Neither the correct clipboard icon from 4.7 nor the new one from 5 is displayed with the old code from 4.7 .
At least an icon is displayed in Simple. But it should be the fa-cube and it will be displayed this one.
- simple.jpg (9.44 KiB) Viewed 856 times
Code: Select all
.forum_read:before { content: '\f1b2'; color:#333333; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
Ah me idiot - there must be an .icon in front of it now
It doesn't work anyway.
font_awesome_for_topics_and_forums.css
(original Code from Lehrling)
Code: Select all
/* Forum icons & Topic icons */
.global_read:before { content: '\f0f3'; color:#222222; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_read_mine:before { content: '\f0f3'; color:#4981CE; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_read_locked:before { content: '\f1f6'; color:#222222; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_read_locked_mine:before { content: '\f1f6'; color:#4981ce; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread:before { content: '\f0f3'; color:#FF0F0F; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread_mine:before { content: '\f0f3'; color:#FF7F50; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread_locked:before { content: '\f1f6'; color:#FF0F0F; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread_locked_mine:before { content: "\f1f6"; color:#FF7F50; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read:before { content: '\f0f3'; color:#222222; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read_mine:before { content: '\f0f3'; color:#4981CE; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read_locked:before { content: '\f1f6'; color:#222222; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read_locked_mine:before { content: '\f1f6'; color:#4981ce; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread:before { content: '\f0f3'; color:#FF0F0F; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread_mine:before { content: '\f0f3'; color:#FF7F50; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread_locked:before { content: '\f1f6'; color:#FF0F0F; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread_locked_mine:before { content: '\f1f6'; color:#FF7F50; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.forum_link:before { content: '\f1d9'; color:#2E4D76; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_read:before { content: '\f1b2'; color:#333333; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_read_locked:before { content: '\f084'; color:#333333; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_read_subforum:before { content: '\f1b3'; color:#333333; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_unread:before { content: '\f35a'; color:#bf0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_unread_locked:before { content: '\f084'; color:#bf0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_unread_subforum:before { content: '\f1b3'; color:#bf0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.sticky_read:before { content: '\f249'; color:#444444; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_read_mine:before { content: '\f249'; color:#395F93; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_read_locked:before { content: '\f28e'; color:#444444; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_read_locked_mine:before { content: '\f28e'; color:#395F93; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread:before { content: '\f249'; color:#bf0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread_mine:before { content: '\f249'; color:#F59B45; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread_locked:before { content: '\f28e'; color:#bf0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread_locked_mine:before { content: '\f28e'; color:#F59B45; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_moved:before { content: '\f047'; color:#0D4F8B; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.pm_read:before { content: '\f2b6'; color:#444444; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read:before { content: '\f07b'; color:#444444; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_mine:before { content: '\f07b'; color:#395F93; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot:before { content: '\f07c'; color:#444444; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot_mine:before { content: '\f07c'; color:#395F93; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_locked:before { content: '\f114'; color:#444444; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_locked_mine:before { content: '\f114'; color:#395F93; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.pm_unread:before { content: '\f0e0'; color:#BF0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread:before { content: '\f07b'; color:#BF0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_mine:before { content: '\f07b'; color:#F59B45; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_hot:before { content: '\f07c'; color:#bf0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_hot_mine:before { content: '\f07c'; color:#F59B45; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_locked:before { content: '\f114'; color:#bf0000; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_unread_locked_mine:before { content: '\f114'; color:#F59B45; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
/* Forum icons & Topic icons */
.global_read { background-image: none; }
.global_read_mine { background-image: none; }
.global_read_locked { background-image: none; }
.global_read_locked_mine { background-image: none; }
.global_unread { background-image: none; }
.global_unread_mine { background-image: none; }
.global_unread_locked { background-image: none; }
.global_unread_locked_mine { background-image: none; }
.announce_read { background-image: none; }
.announce_read_mine { background-image: none; }
.announce_read_locked { background-image: none; }
.announce_read_locked_mine { background-image: none; }
.announce_unread { background-image: none; }
.announce_unread_mine { background-image: none; }
.announce_unread_locked { background-image: none; }
.announce_unread_locked_mine { background-image: none; }
.forum_link { background-image: none; }
.forum_read { background-image: none; }
.forum_read_locked { background-image: none; }
.forum_read_subforum { background-image: none; }
.forum_unread { background-image: none; }
.forum_unread_locked { background-image: none; }
.forum_unread_subforum { background-image: none; }
.sticky_read { background-image: none; }
.sticky_read_mine { background-image: none; }
.sticky_read_locked { background-image: none; }
.sticky_read_locked_mine { background-image: none; }
.sticky_unread { background-image: none; }
.sticky_unread_mine { background-image: none; }
.sticky_unread_locked { background-image: none; }
.sticky_unread_locked_mine { background-image: none; }
.topic_moved { background-image: none; }
.pm_read,
.topic_read { background-image: none; }
.topic_read_mine { background-image: none; }
.topic_read_hot { background-image: none; }
.topic_read_hot_mine { background-image: none; }
.topic_read_locked { background-image: none; }
.topic_read_locked_mine { background-image: none; }
.pm_unread,
.topic_unread { background-image: none; }
.topic_unread_mine { background-image: none; }
.topic_unread_hot { background-image: none; }
.topic_unread_hot_mine { background-image: none; }
.topic_unread_locked { background-image: none; }
.topic_unread_locked_mine { background-image: none; }
Why the code in the codebox appears to be moved is also indicated by the stars.
Original css 3.3.0
Code: Select all
/* Forum icons & Topic icons */
.global_read:before { content: "\f0f3"; color:#222222; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_read_mine:before { content: "\f0f3"; color:#4981CE; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_read_locked:before { content: "\f1f6"; color:#222222; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_read_locked_mine:before { content: "\f1f6"; color:#4981ce; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread:before { content: "\f0f3"; color:#FF0F0F; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread_mine:before { content: "\f0f3"; color:#FF7F50; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread_locked:before { content: "\f1f6"; color:#FF0F0F; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.global_unread_locked_mine:before { content: "\f1f6"; color:#FF7F50; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read:before { content: "\f0f3"; color:#222222; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read_mine:before { content: "\f0f3"; color:#4981CE; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read_locked:before { content: "\f1f6"; color:#222222; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_read_locked_mine:before { content: "\f1f6"; color:#4981ce; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread:before { content: "\f0f3"; color:#FF0F0F; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread_mine:before { content: "\f0f3"; color:#FF7F50; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread_locked:before { content: "\f1f6"; color:#FF0F0F; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.announce_unread_locked_mine:before { content: "\f1f6"; color:#FF7F50; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.forum_link:before { content: "\f1d9"; color:#2E4D76; font-family: 'FontAwesome'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_read:before { content: "\f1b2"; color:#333333; font-family: 'FontAwesome'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_read_locked:before { content: "\f084"; color:#333333; font-family: 'FontAwesome'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_read_subforum:before { content: "\f1b3"; color:#333333; font-family: 'FontAwesome'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_unread:before { content: "\f1b2"; color:#bf0000; font-family: 'FontAwesome'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_unread_locked:before { content: "\f084"; color:#bf0000; font-family: 'FontAwesome'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.forum_unread_subforum:before { content: "\f1b3"; color:#bf0000; font-family: 'FontAwesome'; position: absolute; top: 22%; font-size: 25px; left: 15px; }
.sticky_read:before { content: "\f249"; color:#444444; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_read_mine:before { content: "\f249"; color:#395F93; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_read_locked:before { content: "\f28e"; color:#444444; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_read_locked_mine:before { content: "\f28e"; color:#395F93; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread:before { content: "\f249"; color:#bf0000; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread_mine:before { content: "\f249"; color:#F59B45; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread_locked:before { content: "\f28e"; color:#bf0000; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.sticky_unread_locked_mine:before { content: "\f28e"; color:#F59B45; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.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:#444444; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read:before { content: "\f07b"; color:#444444; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_mine:before { content: "\f07b"; color:#395F93; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot:before { content: "\f07c"; color:#444444; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_hot_mine:before { content: "\f07c"; color:#395F93; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_locked:before { content: "\f114"; color:#444444; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
.topic_read_locked_mine:before { content: "\f114"; color:#395F93; 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:#F59B45; 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:#F59B45; 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: "\f114"; color:#F59B45; font-family: 'FontAwesome'; position: absolute; top: 20%; font-size: 25px; left: 15px; }
/* Forum icons & Topic icons */
.global_read { background-image: none; }
.global_read_mine { background-image: none; }
.global_read_locked { background-image: none; }
.global_read_locked_mine { background-image: none; }
.global_unread { background-image: none; }
.global_unread_mine { background-image: none; }
.global_unread_locked { background-image: none; }
.global_unread_locked_mine { background-image: none; }
.announce_read { background-image: none; }
.announce_read_mine { background-image: none; }
.announce_read_locked { background-image: none; }
.announce_read_locked_mine { background-image: none; }
.announce_unread { background-image: none; }
.announce_unread_mine { background-image: none; }
.announce_unread_locked { background-image: none; }
.announce_unread_locked_mine { background-image: none; }
.forum_link { background-image: none; }
.forum_read { background-image: none; }
.forum_read_locked { background-image: none; }
.forum_read_subforum { background-image: none; }
.forum_unread { background-image: none; }
.forum_unread_locked { background-image: none; }
.forum_unread_subforum { background-image: none; }
.sticky_read { background-image: none; }
.sticky_read_mine { background-image: none; }
.sticky_read_locked { background-image: none; }
.sticky_read_locked_mine { background-image: none; }
.sticky_unread { background-image: none; }
.sticky_unread_mine { background-image: none; }
.sticky_unread_locked { background-image: none; }
.sticky_unread_locked_mine { background-image: none; }
.topic_moved { background-image: none; }
.pm_read,
.topic_read { background-image: none; }
.topic_read_mine { background-image: none; }
.topic_read_hot { background-image: none; }
.topic_read_hot_mine { background-image: none; }
.topic_read_locked { background-image: none; }
.topic_read_locked_mine { background-image: none; }
.pm_unread,
.topic_unread { background-image: none; }
.topic_unread_mine { background-image: none; }
.topic_unread_hot { background-image: none; }
.topic_unread_hot_mine { background-image: none; }
.topic_unread_locked { background-image: none; }
.topic_unread_locked_mine { background-image: none; }
Only the forum icons in the index are not displayed correctly or not be accepted. Also not with the code of version 5 icons. Inside, the icons look correct so far. This can hardly be a bug, most icons are accepted and correct.
- inside icons.jpg (17.95 KiB) Viewed 842 times
But the old 4.7 icons definitely looked better. It is definitely a problem that the icons are only displayed as they want to be. Instead of filled out here only with border.
- 3.3.0 style.jpg (7.34 KiB) Viewed 839 times