How to change a web elements using the JQUERY e.g template icon

[Matt Bourne]

Hi Joomlers!

This is a solution sharing post, from a newbie that always have a problem to do small little things but often being helped by other kindhearted power users in here especially, The Legendary Mr Pavel-ww

Oftentimes, we need to change something in our template or just the web entirely, and installing some commercial plugin might be the last option we had for some reason OR you're just too lazy to tinkering with the template codebase to find the little line to be amended like me..

NO PLUGIN NEEDED HERE

So, for the past few days, I need to change the top bar menu icon and kinda bogged down, and even too "small" to ask in here



I need to change the mobile phone icon to the new fax machine icon, or you basically can just change ANY ELEMENTS in ANYWHERE actually as long it have the HTML snippet line

For example, in the template html, it will using this line

Code: Select all

<span class="fas fa-mobile-alt" aria-hidden="true"></span>

So basically, I just need to change them directly to be like this to make it work

Code: Select all

<span class="fas fa-fax" aria-hidden="true"></span>

Since I don't want to mess the codebase and found this quickest solution to be shared here

I just put 2 lines of JS actually in the template custom JS/CSS column, every modern template should have this, like the Joomshaper Helix, which is my go-to for all my project, and their page builder is just getting more powerful nowadays

Code: Select all

    $(document).ready(function(){
      // When the page loads, change the icon class
      $('.fas.fa-mobile-alt').removeClass('fa-mobile-alt').addClass('fa-fax');
    });

so for the final result, you will get this beautiful fontawesome css based icon, without the need to modify their codebase, everything is done automatically on the fly via the JQUERY



--------------------
Technical Explanation:

jQuery: The script waits for the document to be fully loaded ($(document).ready()), then selects the <span> element with both the fas and fa-mobile-alt classes.

Class Change: Using removeClass('fa-mobile-alt'), it removes the old icon class and then adds addClass('fa-fax') to replace it with the new icon.

Font Awesome: It links to Font Awesome icons, so you can use the icons as you did with fa-mobile-alt and fa-fax.

Why jQuery and not CSS?
CSS on its own doesn’t have a mechanism for dynamically changing the class of an element based on the load event.
jQuery is excellent for DOM manipulation, making it easy to change class names and, in turn, swap icons or other elements.
--------------------
P/S I will share later the same trick on how to get the CSS based icons for the web utilities icons above, so no more jpeg/png files in html table needed anymore.. quick and simple solution for everyone!

Triva: The word sounded "Joomla" in my native language also means "Let's come together".. and I'm not even African, but the sacred sharing spirit keeps us all together in this forum

[Pavel-ww]

This is a solution sharing post, from a newbie that always have a problem to do small little things but often being helped by other kindhearted power users in here especially, The Legendary Mr Pavel-ww

Hi.

Thank you for the kind words and the appreciation of my humble self .
----
When solving problems, it is worth choosing the simplest and most reliable method.

CSS solves 90% of the tasks related to appearance. It is the simplest and most reliable method.
It is non-destructive method that does not cause problems and can always be removed in case of erroneous code.

JS/jQuery - this method should be used if there is no CSS solution. The downside is that it may not work if the user has disabled JS in the browser or if JS did not load due to a poor internet connection. JS/jQuery loads after the DOM structure (HTML/CSS) has been loaded. This can cause a delay in the loading of your element and, as a result, an unpleasant flicker for the user. While this may not be noticeable on your page when there is little content, the more content you have, the more noticeable it will become. At the very least, you should avoid using JS/jQuery for elements located in the first, visible part of your page's content.

2.jpg

Moreover, this is not a universal solution and depends on the template. For example, in Cassiopea, you wouldn’t be able to do this using jQuery, as jQuery is not included by default in this template.

It is also non-destructive method that does not cause problems and can always be removed in case of erroneous code.

PHP - editing the source code. This is a destructive method and can break your website if you make a mistake. Before editing, you should always make backup copies of the files you are editing.

-----------

In the case of your task, CSS is the simplest and most reliable method.

Go to the Font Awesome website to get the icon code.

1.jpg

-

Then use a single line of CSS.

Code: Select all

#sp-top2 .fa-mobile-alt::before {
    content: "\f1ac";
}

Additionally, you should follow the principle — the less code you use, the better the performance of your website. As you can see, CSS is the winner in this aspect.

[Per Yngve Berg]

JQUERY was popular with J2.5. Now obsolete.

[Pavel-ww]

JQUERY was popular with J2.5. Now obsolete.

I think jQuery will remain a standard in web development for many years to come. This is especially true for CMS systems. Therefore, there is no need to worry about it becoming "obsolete." Moreover, jQuery has a low entry barrier for beginners in JS programming, which is why it will remain relevant. Additionally, it continues to evolve. In many ways, it still remains significantly more convenient than native JS.