Change Font Awesome Icon

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
bennybernaer
Registered User
Posts: 599
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Change Font Awesome Icon

Post by bennybernaer »

Hey,

I've given my forum icons a new look, and it's been going really well so far.
But now there is one icon that I would like to change, but I can't.
Probably because it uses FontAwesome 5. And if I understood correctly this is not compatible within phpBB.
However, this should work for me. Is there a way to get this working though?


My edits:

Code: Select all

/* ------- Forum & Topic Icons (Pulsing) ------- */
dl.row-item {
	background-image: none;
}

.forums .row-item:before, .topics .row-item:before, .pmlist .row-item:before, .cplist .row-item:before {
	font-family: FontAwesome;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -15px;
	margin-left: 9px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
	background: rgba(0, 89, 179);
	color: #FFF;
	font-size: 16px;
}


/* Adjustments for weirdly sized icons */
/* Nudge the speech bubble up a few pixels */
.topic_read:before, .topic_read_mine:before, .topic_read_hot:before, .topic_read_hot_mine:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before {
	line-height: 28px !important;
}

/* External link left and down */
.forum_link:before {
	line-height: 0 !important;
	width: 30px !important;
	height: 15px !important;
	padding: 16px 0 1px 2px;
}

/* Set the icons */							/* Megaphone */
.global_read:before							{content: "\f0a1";}
.global_read_mine:before					{content: "\f0a1";}
.global_read_locked:before					{content: "\f0a1";}
.global_read_locked_mine:before				{content: "\f0a1";}
.global_unread:before						{content: "\f0a1";}
.global_unread_mine:before					{content: "\f0a1";}
.global_unread_locked:before				{content: "\f0a1";}
.global_unread_locked_mine:before			{content: "\f0a1";}
											/* Megaphone */
.announce_read:before						{content: "\f0a1";}
.announce_read_mine:before					{content: "\f0a1";}
.announce_read_locked:before				{content: "\f0a1";}
.announce_read_locked_mine:before			{content: "\f0a1";}
.announce_unread:before						{content: "\f0a1";}
.announce_unread_mine:before				{content: "\f0a1";}
.announce_unread_locked:before				{content: "\f0a1";}
.announce_unread_locked_mine:before			{content: "\f0a1";}
											/* External link */
.forum_link:before							{content: "\f08e";}
											/* Speech Bubble */
.forum_read:before							{content: "\f03a";}
.forum_read_subforum:before					{content: "\f03a";}
.forum_unread:before						{content: "\f03a";}
.forum_unread_subforum:before				{content: "\f03a";}
											/* Pin */
.sticky_read:before							{content: "\f08d";}
.sticky_read_mine:before					{content: "\f08d";}
.sticky_read_locked:before					{content: "\f08d";}
.sticky_read_locked_mine:before				{content: "\f08d";}
.sticky_unread:before						{content: "\f08d";}
.sticky_unread_mine:before					{content: "\f08d";}
.sticky_unread_locked:before				{content: "\f08d";}
.sticky_unread_locked_mine:before			{content: "\f08d";}
											/* Right arrow */
.topic_moved:before							{content: "\f061";}
											/* Envelope */
.pm_read:before 							{content: "\f2b6";}
.pm_unread:before 							{content: "\f0e0";}
											/* Speech Bubble */
.topic_read:before							{content: "\f075";}
.topic_read_mine:before						{content: "\f075";}
.topic_read_hot:before						{content: "\f075";}
.topic_read_hot_mine:before					{content: "\f075";}
.topic_unread:before						{content: "\f075";}
.topic_unread_mine:before					{content: "\f075";}
.topic_unread_hot:before					{content: "\f075";}
.topic_unread_hot_mine:before				{content: "\f075";}
											/* Padlock */
.forum_read_locked:before					{content: "\f023";}
.forum_unread_locked:before					{content: "\f023";}
.topic_read_locked:before					{content: "\f023";}
.topic_read_locked_mine:before				{content: "\f023";}
.topic_unread_locked:before					{content: "\f023";}
.topic_unread_locked_mine:before			{content: "\f023";}


/* Unread States */
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	animation: UnreadPulse 1.4s infinite;
	color: #FFF;
}
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	background-color: #d41142 !important;
}
What still doesn't work
What it should be:

Code: Select all

											/* Speech Bubble */
.forum_read:before							{content: "\f496";}
.forum_read_subforum:before					{content: "\f496";}
.forum_unread:before						{content: "\f496";}
.forum_unread_subforum:before				{content: "\f496";}
{content: "\f496";} = FontAwesome 5
The icon isn't available in FontAwesome 4, so somehow I'll have to get it to work anyway.

Naamloos.png
User avatar
david63
Registered User
Posts: 20646
Joined: Thu Dec 19, 2002 8:08 am

Re: Change Font Awesome Icon

Post by david63 »

You will have to load FA5 if you want to use one of those icons
David
Remember: You only know what you know and - you don't know what you don't know!

I now no longer support any of my extensions but they will start to become available here
User avatar
bennybernaer
Registered User
Posts: 599
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: Change Font Awesome Icon

Post by bennybernaer »

david63 wrote: Thu Oct 14, 2021 6:02 pm You will have to load FA5 if you want to use one of those icons
And how should I do this? Because that's what I've been looking for all afternoon.
User avatar
david63
Registered User
Posts: 20646
Joined: Thu Dec 19, 2002 8:08 am

Re: Change Font Awesome Icon

Post by david63 »

bennybernaer wrote: Thu Oct 14, 2021 6:03 pm how should I do this?
Download the FA5 file and upload it to your board then add it in overall_header.html

Or, preferably, either create a small extension to do it or create a child style - that way you will not need update your files at every update.
David
Remember: You only know what you know and - you don't know what you don't know!

I now no longer support any of my extensions but they will start to become available here
User avatar
bennybernaer
Registered User
Posts: 599
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: Change Font Awesome Icon

Post by bennybernaer »

david63 wrote: Thu Oct 14, 2021 8:40 pm
bennybernaer wrote: Thu Oct 14, 2021 6:03 pm how should I do this?
Download the FA5 file and upload it to your board then add it in overall_header.html

Or, preferably, either create a small extension to do it or create a child style - that way you will not need update your files at every update.
I don't really get it...

Code: Select all

<script src="https://kit.fontawesome.com/8c3e9155c2.js" crossorigin="anonymous"></script>

Code: Select all

.forum_read:before				    { content: "\f496"; color:#ffffff; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; }
Now I've spent hours for such a stupid icon. And those from FA4 work without any problems
User avatar
bennybernaer
Registered User
Posts: 599
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: Change Font Awesome Icon

Post by bennybernaer »

Still didn't succeed. And that for a stupid icon
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: Change Font Awesome Icon

Post by pit-PL »

Works fine for me, go to http://bootlike.byethost18.com/demo/ and switch style to prosilver.
User avatar
bennybernaer
Registered User
Posts: 599
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: Change Font Awesome Icon

Post by bennybernaer »

And is this all you've done? Because if I take your code from css. Then it still doesn't work

Code: Select all

/* ------- Forum & Topic Icons (Pulsing) ------- */
dl.row-item {
	background-image: none;
}

.forums .row-item:before, .topics .row-item:before, .pmlist .row-item:before, .cplist .row-item:before {
	font-family: FontAwesome;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -15px;
	margin-left: 9px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
	background: rgba(0, 89, 179);
	color: #FFF;
	font-size: 16px;
}


/* Adjustments for weirdly sized icons */
/* Nudge the speech bubble up a few pixels */
.topic_read:before, .topic_read_mine:before, .topic_read_hot:before, .topic_read_hot_mine:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before {
	line-height: 28px !important;
}

/* External link left and down */
.forum_link:before {
	line-height: 0 !important;
	width: 30px !important;
	height: 15px !important;
	padding: 16px 0 1px 2px;
}

/* Set the icons */							/* Megaphone */
.global_read:before							{content: "\f0a1";}
.global_read_mine:before					{content: "\f0a1";}
.global_read_locked:before					{content: "\f0a1";}
.global_read_locked_mine:before				{content: "\f0a1";}
.global_unread:before						{content: "\f0a1";}
.global_unread_mine:before					{content: "\f0a1";}
.global_unread_locked:before				{content: "\f0a1";}
.global_unread_locked_mine:before			{content: "\f0a1";}
											/* Megaphone */
.announce_read:before						{content: "\f0a1";}
.announce_read_mine:before					{content: "\f0a1";}
.announce_read_locked:before				{content: "\f0a1";}
.announce_read_locked_mine:before			{content: "\f0a1";}
.announce_unread:before						{content: "\f0a1";}
.announce_unread_mine:before				{content: "\f0a1";}
.announce_unread_locked:before				{content: "\f0a1";}
.announce_unread_locked_mine:before			{content: "\f0a1";}
											/* External link */
.forum_link:before							{content: "\f08e";}
											/* Speech Bubble */
.forum_read:before							{content: "\f496";}
.forum_read_subforum:before					{content: "\f496";}
.forum_unread:before						{content: "\f496";}
.forum_unread_subforum:before				{content: "\f496";}
											/* Pin */
.sticky_read:before							{content: "\f08d";}
.sticky_read_mine:before					{content: "\f08d";}
.sticky_read_locked:before					{content: "\f08d";}
.sticky_read_locked_mine:before				{content: "\f08d";}
.sticky_unread:before						{content: "\f08d";}
.sticky_unread_mine:before					{content: "\f08d";}
.sticky_unread_locked:before				{content: "\f08d";}
.sticky_unread_locked_mine:before			{content: "\f08d";}
											/* Right arrow */
.topic_moved:before							{content: "\f061";}
											/* Envelope */
.pm_read:before 							{content: "\f2b6";}
.pm_unread:before 							{content: "\f0e0";}
											/* Speech Bubble */
.topic_read:before							{content: "\f075";}
.topic_read_mine:before						{content: "\f075";}
.topic_read_hot:before						{content: "\f075";}
.topic_read_hot_mine:before					{content: "\f075";}
.topic_unread:before						{content: "\f075";}
.topic_unread_mine:before					{content: "\f075";}
.topic_unread_hot:before					{content: "\f075";}
.topic_unread_hot_mine:before				{content: "\f075";}
											/* Padlock */
.forum_read_locked:before					{content: "\f023";}
.forum_unread_locked:before					{content: "\f023";}
.topic_read_locked:before					{content: "\f023";}
.topic_read_locked_mine:before				{content: "\f023";}
.topic_unread_locked:before					{content: "\f023";}
.topic_unread_locked_mine:before			{content: "\f023";}


/* Unread States */
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	animation: UnreadPulse 1.4s infinite;
	color: #FFF;
}
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before, .announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before, .forum_unread:before, .forum_unread_locked:before, .forum_unread_subforum:before, .sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before, .pm_unread:before, .topic_unread:before, .topic_unread_mine:before, .topic_unread_hot:before, .topic_unread_hot_mine:before, .topic_unread_locked:before, .topic_unread_locked_mine:before {
	background-color: #d41142 !important;
}
Naamloos.png
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: Change Font Awesome Icon

Post by pit-PL »

Save this site as fa5_kit.js
and add this

Code: Select all

<script src="{T_TEMPLATE_PATH}/fa5_kit.js" crossorigin="anonymous"></script>
to overall_footer.html before <script src="{T_JQUERY_LINK}"></script>.

fa5_kit.js goes to ./prosilver/template/

btw
When I try to register on your site (using British English), it gives a blanc page.
User avatar
bennybernaer
Registered User
Posts: 599
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: Change Font Awesome Icon

Post by bennybernaer »

Thank you! It works now. I didn't even know you needed a js.file for it. And the internet doesn't give much info either.

I notice that with some icons the padding is gone, but I replace it with others
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Change Font Awesome Icon

Post by Hanakin »

I would recomend looking at not using it via css however and possibly switching to https://iconify.design/ as the css uses fonts rather than svgs. plus with iconify you get access to every font library there is!
User avatar
halil16
Registered User
Posts: 1262
Joined: Fri Jul 24, 2020 11:30 pm
Location: Turkiye
Name: Halil
Contact:

Re: Change Font Awesome Icon

Post by halil16 »

Hi, I'm resurrecting the discussion.

Now I get the point. But what I don't understand is the use of icons. I tried to use the icons in the version used in phpBB3.3 instead of FV5.

I think there is FV4 version. But the icons were not showing. Did I do the usage wrong? Won't it be like /f15c?

Do you also need the dl.row-item {
background-image: none;
code? I think that if I edit directly from the _colours.scss file, it would not be necessary.
* Hire me at fiverr for your phpBB board.
"The day we will need ideas more than possessions, we will find the secret to true wealth." - Peyami Safa
I'm learning English...
Contributions: #Hashtag, Elegance, Latte
User avatar
GTI
Registered User
Posts: 300
Joined: Mon Aug 24, 2020 4:59 pm
Location: West Sussex
Name: Laura

Re: Change Font Awesome Icon

Post by GTI »

halil16 wrote: Fri Mar 11, 2022 9:52 pm But the icons were not showing.
The icons are not showing because Arty's style has a line of code which stops them showing,

So if you are using the code posted at the top of this topic... Try adding !important to each icons content,

Example:
.topic_read:before { content: "\f075"; }

Would be:
.topic_read:before { content: "\f075" !important; }
Most of us will enjoy Christmas in the comfort of our own homes this year, however, sadly, that can't be said for people in the Ukraine who are suffering day after day, due to the Russian invasion.

If you would like to make a small donation to help Ukrainians in their time of need, you can donate to help all Ukrainians via BritishRedCross or you can donate to help the Ukrainian children via Unicef. 🇺🇦 Thank You 🇺🇦
User avatar
halil16
Registered User
Posts: 1262
Joined: Fri Jul 24, 2020 11:30 pm
Location: Turkiye
Name: Halil
Contact:

Re: Change Font Awesome Icon

Post by halil16 »

How can I integrate the icons used by my WordPress theme that the forum belongs to in phpBB. I struggled a bit, moved the files or something, but I couldn't.

Here is this:

font-awesome file:

>webfonts file
Image

>css file
Image
* Hire me at fiverr for your phpBB board.
"The day we will need ideas more than possessions, we will find the secret to true wealth." - Peyami Safa
I'm learning English...
Contributions: #Hashtag, Elegance, Latte
User avatar
halil16
Registered User
Posts: 1262
Joined: Fri Jul 24, 2020 11:30 pm
Location: Turkiye
Name: Halil
Contact:

Re: Change Font Awesome Icon

Post by halil16 »

Also, is it correct to use the code in the first message? It works fine, no problem.

Also, the topic icons stay on the back. I tried to do it with z-index but it didn't work:

Image
* Hire me at fiverr for your phpBB board.
"The day we will need ideas more than possessions, we will find the secret to true wealth." - Peyami Safa
I'm learning English...
Contributions: #Hashtag, Elegance, Latte
Post Reply

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