3.3.1 Problem with the global icon code

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

3.3.1 Problem with the global icon code

Post by Tastenplayer »

The global iconcode, i.e. that a certain font awesome icon is displayed as a different icon everywhere without any changes in the html files, does not work in 3.3.1. I've been trying for hours to adjust the code to make it work again. But it never works. Besides, the question icon appears oversized.

Instead of the fa.external-link-square a fa.clipboard should be displayed in the lastsubject. But unfortunately nothing happens.

Code: Select all

.fa-external-link-square::before {
	content: "\f0ea";
	color: silver;
}
3.3.1 icons.jpg
There must be a possibility of a global icon change code again - or?

When I remove the ::before from the code, the content with the icon code ist akzepted in Firefox. But the desired icon is still not displayed.

I'm starting to have conditions! In Blackfog I already had to replace icons, because it didn't look good anymore, since all gradient icons are configured in the style. Instead of the question icon I have now added a fa-book-reader for FAQ and a fa-bullhorn for the notifications in the navbar :) . I have also enlarged it to 15px for the navbar.
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
warmweer
Jr. Extension Validator
Posts: 11234
Joined: Fri Jul 04, 2003 6:34 am
Location: Van Allen Bel ... gium
Contact:

Re: 3.3.1 Problem with the global icon code

Post by warmweer »

Is 3.3.1 correct?
Could it be a typo: 3.3.0 or are you testing the 3.3.1 RC1 ? (if the latter, you should mention it in the Development board.)
Spelling is freeware, which means you can use it for free.
On the other hand, it is not open source, which means you cannot change it or publish it in a modified form.


Time flies like an arrow, but fruit flies like a banana.
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Tastenplayer »

warmweer wrote: Thu Jun 25, 2020 11:29 am Is 3.3.1 correct?
Could it be a typo: 3.3.0 or are you testing the 3.3.1 RC1 ? (if the latter, you should mention it in the Development board.)
In 3.3.1 the font awesome icons 5.0.13 are included - but for the moment still 3.3.1-RC1 :) . The RC does not change the fact that the correct icon must be displayed in the updated style for 3.3.1. With the standard icon of the prosilver it looks like shxx in Blackfog.
lastsubject-blackfog.jpg
lastsubject-blackfog.jpg (5.74 KiB) Viewed 1118 times
https://www.w3schools.com/icons/fontawe ... bility.asp
you should mention it in the Development board
I mentioned it there. But maybe another style developer knows what the code should be now ;) .
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Mannix_ »

Tastenplayer wrote: Thu Jun 25, 2020 11:16 am

Code: Select all

.fa-external-link-square::before {
	content: "\f0ea";
	color: silver;
}
If you apply this in prosilver does it work? Purge the cache maybe ?
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Tastenplayer »

That's exact my code and doesn't work in 3.3.1-RC1 - up to 3.3.0 it had worked.
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Mannix_ »

Tastenplayer wrote: Thu Jun 25, 2020 1:19 pm That's exact my code and doesn't work in 3.3.1-RC1 - up to 3.3.0 it had worked.
I'm asking if you apply this code in prosilver 3.3.1 does it work as intended and changes the icon or not? Also did you apply all the html code changes from 3.3.0 to 3.3
1?
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Tastenplayer »

Yes I have made all update adjustments. No the code does not work when inserted in the prosilver.

I should have inserted this earlier. I think I found it. Anyway, now the correct icon is displayed. But the clipboard icon is displayed weird. It doesn't look good anymore. Also the global icon code doesn't work with the new codes from version 5.

you put a .icon before

Code: Select all

.icon.fa-external-link-square::before {
	content: "\f1ba";
	color: silver;
	font-size: 14px;
}
iconreplace.jpg
iconreplace.jpg (11.83 KiB) Viewed 1071 times
But as mentioned before, with the font icon code of the new icons it doesn't work with this content code
e.g with the new font code for fas fa-pen-fancy 
It doesn't work that way content: "\&#xf5ac";
Last edited by Tastenplayer on Thu Jun 25, 2020 2:03 pm, edited 2 times in total.
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Mannix_ »

Well on my test board your code works fine so idk
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Tastenplayer »

Very strange. My TB is installed locally.
As you can see, no fa-reply is displayed in prosilver with my code.
prosilver fa reply.jpg
prosilver fa reply.jpg (10.71 KiB) Viewed 1045 times
In some styles it works with an .icon before - but not in Prosilver. Some icons are displayed incorrectly or not at all with the .icon before. Something is very strange.
It seems that the only solution is to adapt this in every relevant html file.
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
spaceace
Registered User
Posts: 1999
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: 3.3.1 Problem with the global icon code

Post by spaceace »

is it possible that this is due to the global icon class was changed in the css?

old code from icons.css

Code: Select all

.icon, .button .icon, blockquote cite:before, .uncited:before {
	display: inline-block;
  	font-weight: normal;
  	font-style: normal;
  	font-variant: normal;
  	font-family: FontAwesome;
  	font-size: 14px;
  	line-height: 1;
  	text-rendering: auto; /* optimizelegibility throws things off #1094 */
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

.icon:before { padding-right: 2px; }

.button .icon:before {
	padding-right: 0;
}
new code... notice the :before removed

Code: Select all

.icon, .button .icon, blockquote cite:before, .uncited:before {
	display: inline-block;
  	font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
  	font-weight: 900;
  	font-style: normal;
  	font-variant: normal;
  	font-size: 14px;
  	line-height: 1;
  	text-rendering: auto; /* optimizelegibility throws things off #1094 */
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

.icon { padding-right: 2px; }

.button .icon {
	padding-right: 0;
}
don't know if that helps but i just noticed the change ;)
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Mannix_ »

Tastenplayer wrote: Thu Jun 25, 2020 1:58 pm
In some styles it works with an .icon before - but not in Prosilver. Some icons are displayed incorrectly or not at all with the .icon before. Something is very strange.
It seems that the only solution is to adapt this in every relevant html file.
Can you give us a download or a link to check what is going on? :)
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Tastenplayer »

Mannix_ wrote: Thu Jun 25, 2020 4:13 pm Can you give us a download or a link to check what is going on? :)
Yeah, as soon as I find out why it's no longer responsive.
Besides, I just have the problem of a significant button change in a style.
buttongraphit.jpg
buttongraphit.jpg (8.63 KiB) Viewed 976 times
Edit: Now the buttons look like in 3.3.0 again. But unfortunately not always. Look at this problem again when 3.3.1-RC2 appears. Waiting and drinking tea.
I am already afraid to update the mixture. :)

Edit:
It works, but not with every icon. It doesn't work with the fa-reply. The fa-clipboard simply looks completely different. Somehow like when a completely different icon is displayed :)

Code: Select all

.icon.fa-external-link-square::before {
	content: "\f0ea";
	color: #B5B5B5; /* Old browsers */ /* IE */
	background:-moz-linear-gradient(top, #DBDBDB 0%, #888 90%);
	background: -webkit-linear-gradient(top, #DBDBDB 0%,#888 90%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color:transparent;
	font-size: 14px;
}
blackfog_clipboard.jpg
blackfog_clipboard.jpg (5.81 KiB) Viewed 953 times

Code: Select all

.icon.fa-external-link-square::before {
	content: "\f112";
	color: #B5B5B5; /* Old browsers */ /* IE */
	background:-moz-linear-gradient(top, #DBDBDB 0%, #888 90%);
	background: -webkit-linear-gradient(top, #DBDBDB 0%,#888 90%);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color:transparent;
	font-size: 14px;
}
blackfog_reply.jpg
blackfog_reply.jpg (6.92 KiB) Viewed 953 times
https://www.phpbb-skins-by.koliofotis.c ... php?id=864 Blackfog_3.3.1-RC1
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Tastenplayer »

I definitely needed that now. My motto from now on is: PC off and off to the sun. :( (The oven seems to be off for some styles even before 4.0.0 - Or you can take a big step backwards and insert png icons again. Or you look for other icon fonts that you can insert instead.) Only the coffee cup in the footer on the right still works. At least the cash register can still be filled. :)
simple font awesome.jpg
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Mannix_ »

The code for fa-reply is f3e5 in FontAwesome 5 https://kapeli.com/cheat_sheets/Font_Aw ... ents/index
You can go 2 different ways change the code to f3e5 or add font-family: FontAwesome to .icon.fa-external-link-square::before
There is probably a conflict somewhere because there are 2 different FontAwesome versions being used 4 and 5
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: 3.3.1 Problem with the global icon code

Post by Tastenplayer »

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. :lol: (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
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. :lol: :lol: :lol:
simple.jpg
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 :oops:
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
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
3.3.0 style.jpg (7.34 KiB) Viewed 839 times
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
Post Reply

Return to “[3.3.x] Styles Support & Discussion”