FoskyM/Pagination

Spez

I use FoskyM's Pagination but it has an error displaying the icon when using fontawesome6. Currently it only shows when using fontawesome5. @FoskyM can you update it? Or does anyone have a way to fix this problem? please help!

Anomalum

Spez I'm doing nothing right now, so I don't mind giving you a hand with this if you want.
I've got two ideas that I think will work, although I'd need to see the site to check first.

Edit: Have you tried manually adding the icons with css?
I'm not using this particular extension thus I can't actually test anything for you, but I've manually added fa icons to a bunch of other elements without any issues, so I'm assuming this should work for you too.

First, add this particular fa 6 script to the head:

// Updated 
<script src="https://kit.fontawesome.com/940400877f.js" async></script>

Next, if adding the above script hasn't already fixed the broken pagination icons, try this:

// Updated
button[aria-label="First"] .Button-icon::before {
    content: "\f100"; /*FA DOUBLE LEFT ICON*/
    font-family: "Font Awesome 6 Free"; /*SET FA VERSION*/
}

button[aria-label="Back"] .Button-icon::before {
    content: "\f104"; /*FA ANGLE LEFT ICON*/
    font-family: "Font Awesome 6 Free";
}

button[aria-label="Next"] .Button-icon::before {
    content: "\f105"; /*FA ANGLE RIGHT ICON*/
    font-family: "Font Awesome 6 Free";
}

button[aria-label="Last"] .Button-icon::before {
    content: "\f101"; /*FA DOUBLE RIGHT ICON*/
    font-family: "Font Awesome 6 Free";
}
#pagination-inputJump + button[aria-label="Jump"] .Button-icon::before {
    content: "\f0e7"; /* FA PAPER PLANE ICON*/
    font-family: "Font Awesome 6 Pro";

cokavar

Spez I have the same situation

Spez

Anomalum this is my site. I am using Fontawesome 6.

Anomalum

Spez Do you mean, you're using the Flarum FA 6 extension?

Could you try adding this FA6 script to your Custom Header HTML <head> section:

<script src="https://kit.fontawesome.com/940400877f.js" async></script>

I would like to see if it fixes the broken Pagination icons.

Spez

Anomalum I added the code to the page and the icon showed up. So the cause is the fontawesome 6 extension?

Spez

Anomalum By the way, where did you get this kit code? It seems to be the pro version. I pasted the kit link into FA6 and it displays the pro version icon

Anomalum

Spez Yeah I'm not really sure what the deal is. I don't even use the extension anymore either.
That simple fa script seems to do the job quite nicely.

Spez

Anomalum But there is one thing I see on your website. That is, if used as your code and pasted into the header html, the icon will load after the website. When the website has finished loading, the new squares will display as icons. It doesn't look very smooth. Do you see that?

Anomalum

Spez Yep. I've noticed that too.
No worries though. Anomalum is a live action learning project....😉👍

Anomalum

Spez To start off with, I was actually using that code's url in the FA 6 extension.
It mostly worked (compared to several other ones), except it still seems that no matter what url we use, there's always at least a handful of random broken icons, (including in the admin interface too).
It was a code bot that suggested adding it to the head, and...😂surprisingly it worked pretty well.

cokavar

Spez Just add this link in the background https://kit.fontawesome.com/940400877f.js

Spez

Anomalum After learning about the FA6 extension, I realized that the author removed the FA5,4... icons to make the website lighter. But that accidentally causes some Extensions using FA5 to not be able to display the icon. I think your solution is the best at this time, until Pagination Extension's icon is updated to version FA6. Thank you for helping me.

Spez

cokavar thankyou very much