Change Font Awesome Icon

[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

[david63]

You will have to load FA5 if you want to use one of those icons

[bennybernaer]

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.

[david63]

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.

[bennybernaer]

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

[bennybernaer]

Still didn't succeed. And that for a stupid icon

[pit-PL]

Works fine for me, go to http://bootlike.byethost18.com/demo/ and switch style to prosilver.

[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

[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.

[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

[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!

[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.

[GTI]

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; }

[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


>css file

[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: