Link Icon Class in T4 not working

cssyeah

Hi Thomas,
Can you tell me what the error free style would look like?
Thank you.

thrane

Thanks, and sure.
I have removed the icon again, but would like to use it.

cssyeah

thrane So add the icon, I will guide you to improve the style for the case with icon.

thrane

cssyeah Any chance you have had a look?

thrane

It's back now :-)
https://fgu.thr.nu

thrane

Did you have a look?
Seems like the class is added to the menu, but directly and not as a separate icon.

cssyeah

Hi @thrane,
Add below CSS rules to the Edit Custom CSS modal in the template dashboard to style for menu icon.

.t4-navbar .navbar .nav-item::before {
  color: #fff;
  font-size: 14px;
  margin-left: 16px;
  margin-right: -32px;
  position: relative;
  z-index: 20;
}

.t4-navbar .navbar .nav-item[class*=" fa-"] .nav-link {
  padding-left: 42px !important;
}

thrane

Thanks, but it still changes the CSS?

cssyeah

Hi,
I have just updated CSS custom code again. Please copy and replace the old css style.
New code:

.t4-navbar .navbar .nav-item::before {
  color: #fff;
  font-size: 14px;
  margin-left: 16px;
  margin-right: -32px;
  position: relative;
  z-index: 20;
}
.t4-navbar .navbar .nav-item[class*=" fa-"] .nav-link {
  padding-left: 42px !important;
}

thrane

Thanks, the icon is placed right now, but the text in the menuitem and submenu are wrong :-(
https://fgu.thr.nu/

cssyeah

Hi Thomas,
Could you share one of your admin accounts with me? I need access to update the customizations and make edits as needed to save time.
Kind regards,

thrane

cssyeah Of course!
Updated info ...

cssyeah

Hi @thrane,
I added below CSS rules to the Edit Custom CSS modal to fix the menu icon issue.

.t4-navbar .nav-item[class*=" fa-"] {
    font-family: inherit;
}

.t4-navbar .nav-item[class*=" fa-"]::before {
    font-family: "Font Awesome 6 Pro";
}

Kind regards,

thrane

Hi
Looks good, thank you so much!
Will this be added in a future update of the framework, since it must be a bug?