1. dautrich
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Wednesday, 20 July 2022
  5.  Subscribe via email
Hi Ciàran

I've just started migrating one of my bigger sites to J4. Doing that, I found two issues regarding FontAwesome classes in menu items.

In J3 I used link classes in the form of "fa-shopping-cart". This worked fine in both desktop and mobile view (s. J3-Desktop.jpg and J3-Mobile.jpg).

In J4 I didn't succeed. I got the best result (but still not a good one) by applying classes like "fa fa-shopping-cart".

  • In desktop view, the FontAwesome icon doesn't appear. There is no spacing between the icon placeholder and the menu item text. The text displays in a wrong font (s. J4-Desktop.jpg)
  • In mobile view, the result is slightly better: The FontAwesome icon is displayed. There seems to be some spacing to the left of the icon, but there is no space between icon and menu item text. The text displays in a wrong font (s. J4-Mobile.jpg).


Is this a bug in the template or am I missing something?

Best regards

Rolf
Attachments (4)
References
  1. https://upgrade.hasenritter.de
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
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
Attachments (4)
References
  1. https://upgrade.hasenritter.de
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
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
Attachments (2)
References
  1. https://upgrade.hasenritter.de/
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
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
Attachments (3)
References
  1. https://upgrade.hasenritter.de
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
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)
Attachments (1)
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
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
References
  1. https://upgrade.hasenritter.de/
  1. more than a month ago
  2. Commercial Templates
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Rolf

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

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 13
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.