Switching from FontAwesome with Wordpress FSE

Hej!

I have a site with Wordpress 6 and FSE theme Twenty Twenty Two. I’m using Font awesome icons (not really much of them — maybe under 10), and they’re really heavy and slow, so I’m in search for alternatives. So, I have basically two questions.

First. Are Icons8 faster (or could be?) than FA icons? I mean, if I’m OK with free FA icons (except for the speed) will I have advantages of using Icons8?

Second. Taking into consideration that I’m not in IT or programming (that’s why I use FSE and Gutenberg), and I use FA icons with a official plugin, how can I switch to Icons8? I tried to find any corresponding text in templates, but FSE doesn’t use PHP templates (they’ve written so) and I don’t even know where to change that line that is in the Icons8 FAQ.

Thanks in advance!

Hi!

Are we talking about Line Awesome as an alternative to Font Awesome? :slight_smile:
Line Awesome is completely free and offers a different style of icons to use on your pages.

Can’t say anything about speed. Since you use only a handful of icons, it would be better to swap them out and test the performance of the new ones.

To load Line Awesome icons, please follow the steps in this article:

Start from the “Manually Adding Font Awesome to WordPress” part.

Then in the code you add to functions.php, replace Font Awesome’s CDN link with ours:

https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css

After that you can proceed with our instructions here

Hej, @Georg_icons8 !

I completely agree, that the best way is to try, but It’s not that easy for me. Besides the fact I’m neither IT nor programming, I’m using FSE theme. FSE themes for Wordpress are built different and do not use PHP templates. Because of that — I just can’t find a place where to change that code! I even can’t find anything connected with fontawesome in any files of my Wordpress )

All block-based themes should have that file anyway.

I’ve downloaded the Twenty Twenty Two theme and functions.php is there in the root folder.
Can you see functions.php in your Wordpress dashboard? Go to Appearance > Theme Editor > Your activated theme > functions.php

Manual method is the only method we can try, because Line Awesome yet doesn’t have a plugin that would set everything up with one click, like FA does.
But we’re ready to help you along the way :slight_smile:

Right, it’s there — but no text with “fontawesome” or just similar with a string from the instruction. As well as in functions.php file from wp-includes, that can be accessed with cPanel File manager

I’m ready to try ) Thanks!

Right, there is no Font Awesome code by default, as it is a third-party service. But since we can edit the file, we can add our code to it.

Add this code at the end of functions.php (make sure that there is an empty line between last line of code and the segment we paste):

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css' );
}

Before I do this — what should I do with FontAwesome plugin? Deactivate?

Yes, I think it’d be better to deactivate it.
I also would advise to make any changes on a child theme, as described in the article, so you could easily roll back if something goes wrong.

well, I think it’s OK to add this code to main functions.php.

But it didn’t worked, unfortunately

Please change the code for each icon accordingly. Leftover code from Font Awesome obviously won’t work.
See the Usage part of this page: Line Awesome: Free Icon Font for Designers

Hi
Have you had an opportunity to finish setting up Line Awesome? Let me know if it works or not, we will be happy to help

Hej @Georg_icons8 ! Sorry for a delay

No, it doesn’t work unfortunately.

First of all, you just cant paste <i class="… /i> into the paragraph of the Gutenberg editor. It doesn’t work. The only place you can paste the code is Custom HTML block — but you got nothing on the web-site. If you will just type <i class manually, you will got what you’ve typed on the web-site.


Hmm
Unfortunately, this slowly goes out of the scope of our “jurisdiction” :slight_smile:
I think it should work, but the important part is to set up everything correctly.

I’d recommend finding someone who is really solid with Wordpress so they could guide you.
You can start with https://stackoverflow.com/ and post a thread there, it is a pretty great resource for asking IT-related questions.