Hi Rolf

Note that the prefix for Font Awesome 5 has changed somewhat. So in the case of the shopping cart icon, try using the fas fa-shopping-cart instead.

Ciaran

Hi Ciàran

I've tried with fa, far, and fas. None of them works correctly. Pls note that in the desktop view, the icon doesn't appear correctly, whereas in the mobile view, the icons are present (as you can see in the screenshots attached to my previous post).

Rolf

Hi Rolf

In which field are you adding the class? Note that Joomla 4 now has a field specifically for adding the icon class to a menu item (Link Type -> Link Icon Class).

Ciaran

Hi Ciaràn,

blame on me: I didn't know that. I already did some testing, but I found some new issues. I will start documenting them tomorrow and will come back to you subsequently.

Rolf

Hi Ciaràn,

following your advice, I have moved the icon classes of form "fas fa-xxxx" to the Link Icon Class field in the menu item form for the top main menu.
To test a number of different cases, I have inserted Fontawesome icons into different menu item types:
- Single article on level 1, 2, and 3,
- category blog,
- category list,
- separator,
- URL.

Issue #1:
In desktop mode, all of the above work fine in the top menu, apart from the type URL, where the Fontawesome icon is not displayed (s. "J4-Desktop_Menu_Item_Types__URL_no_icon.jpg" ).

Issue #2:
In my footer menu, I added a Fontawesome icon to a menu item of type Smart Search - Search.
The result doesn't look very nice, because there are a "." and additional spacing between icon and menu item text. (s. "J4_Footer_Menu.jpg" ).
I applied some custom css:

.footermenu ul li span::after {

	content: "";

	margin-left: 0;

}

This solves the issue (s. "J4_Footer_Menu_With_Custom.css.jpg" ), but there might be a better solution.

Issue #3:
In the mobile menu, the menu item text is displayed below the Fontawesome icons (s. "J4_Mobile_Menu.jpg" ). Again, the Fontawesome icon is not displayed in a menu item of type URL.
In the J3 version, icons and text have been displayed in one line, also for the URL type (s. "J3-Mobile.jpg" in the original post).

Do you have an idea how to resolve the issues?

Regards

Rolf

Hi Rolf

1. May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

2. Your CSS solution looks perfect!

3, To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.mm-spn a {

    display: flex;

    align-items: center;

}

Ciaran

Hi Ciaràn

Issue #1: I have created a Super User account for you. The credentials are provided in a mail to info@joomla51.com.


Issue #2: Thanks!


Issue #3:

I have applied your CSS to the custom.css. This alone didn't solve the issue (see "J4-Mobile_After_Ciarans_Patch.jpg" ). As you can see in this screenshot, there is extra space in front of all the Fontawesome icons (marked blue).

After some examination, I may have found the culprit: The CSS rule in the red box obviously applies a padding-left of 20px for the link and another padding-left of 20px for the span, leading to an indentation. To remedy this, I applied some additional CSS:

.mm-spn span {

	padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) var(--mm-spn-item-indent) calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) 0px;

After that, the mobile menu looks fine (see "J4-Mobile_After_Ciarans_and Rolfs_Patches.jpg" ). Btw: I also checked the levels 2 and 3 of the mobile menu. Those look fine as well.


You might want to add your patch and my additional patch to the next release of the template.

From this forum post, there remains the problem with "Fontawesome icon not displayed for menu item type URL".

Regards

Rolf

Hi Ciaràn

today I got an email from you stating that my remaining issue "Fontawesome icon not displayed for menu item type URL" should now be solved. Sorry to say, but this is not completely correct: The Fontawesome icon is now displayed correctly with the menu item type URL, but this icon is not completely aligned with the other menu items (padding-left: 8px) (see SKYLAR_J4_Indent_Issue_URL.jpg ).
I found some CSS to solve this little issue:

.p-2.fas.fa-shopping-cart {

	padding-left: 0px !important;

}

This works, but is obviously specific to the shopping-cart icon. Applying the padding to ".p-2.fas" only would be okay as well.
Maybe you should use class ".pe-2" instead of ".p-2"; changing this in devtools solves the issue.

While testing, I found another little issue in mobile view: The mobile menu title shows "Menu" (see SKYLAR_J4_Mobile_Menu_Title_Wrong_1.jpg ), while the respective setting in the template is "Navigation" (see SKYLAR_J4_Mobile_Menu_Title_Wrong_2.jpg ).

Are you going to produce a new version of the template after solving these issues?

Regards

Rolf

HI Ciaràn

Sorry to say that I just deleted your patch for Fontawesome/URL by updating the template to your latest version. I hope that you have a backup somewhere (or know the correction by heart).

Rolf

Hi Rolf

We have just updated the Skylar template to resolve the above-mentioned issues. For details on updating your template may I suggest the following article.. https://joomla51.com/tutorials/joomla-basics/updating-your-joomla-template

If the issue persists after updating, may I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran

Hi Ciaràn

updating the template to V1.1.5 solves the issue regarding the missing Fontawesome icon in front of a menu type item URL (both in desktop and mobile view).

To get a good look for the mobile menu, I need to apply this CSS:

.mm-spn a {

   display: flex;

   align-items: center;

}

.mm-spn span {

   padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) var(--mm-spn-item-indent) calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) 0px;

}

.mm-spn.mm-spn--navbar::after {

   content:"Navigation";

}

The first two rules have been discussed in this thread. Rule 1 (.mm-spn a) has been proposed by you, rule 2 (.mm-spn span) by me.
Rule 3 is necessary, because the Mobile Menu Title from template settings is obviously not copied into variable "data-mm-spn-title".


For the footer menu I also need this CSS (which has been proposed by me during this thread):

.footermenu ul li span::after {

	content: "";

	margin-left: 0;

}

Feel free to use my CSS for your next release.

Regards

Rolf



Btw: The template downloads page on your website still reads "V1.1.4", while the download version actually is "V1.1.5". (s. screenshot)

Hi Ciaràn

I left your account activated. Since this is only a development site, you can use it at your discretion for testing updates of your SKYLAR template.

Regards

Rolf

Thank you Rolf

I will include fixes for these and some other minor issues regarding the mobile menu in the next template.

Ciaran