[Jeroen Smallegange]

Hi,

As many others, I do have some issues with my awesome font. I’m using Elementor for all my pages. In the header menu on my desktop page, the icons were changed. I did manage to change them back to arrows, but it does not work on the mobile version.

The mobile version has no hamburger icon and no arrows in the dropdown toggle.

I did manage to change this in the Chrome inspection tool, but it does stick if I use the code in additional CSS after saving.

https://snowboardarlberg.com/

Thanks

[minal]

Hello @Jeroen:

Since you are using elementor, our theme includes Font Awesome version 6.7.2, which may not be fully supported by Elementor at this time. As a result, some icons might not display correctly when using Elementor widgets.

To resolve this issue, you can add the following CSS to your site: Go to Dashboard > Appearance > Customizer > Additional CSS.

Paste the provided CSS code into the Additional CSS field.

.font-awesome:before, 
#feature-slider .cycle-prev:before, 
.sidr .dropdown-toggle:after,
#feature-slider .cycle-next:before, 
#content-prev:before, 
#content-next:before, 
.posted-on a:before, 
.byline a:before, 
.cat-links span+a:before, 
.tags-links span+a:before, 
.comments-link a:before, 
#header-toggle:before, 
.edit-link a:before, 
.sidr .menu-item-has-children a:after, 
.sidr .page_item_has_children a:after {
  font-family: "FontAwesome" !important;
}

This should help ensure the icons display properly.

Sincerely,

Minal

[Jeroen Smallegange]

Hi Minal,

Awesome, it works on mobile. I deleted the code I figured out myself, because it interferes with your code.

On the browser page, I do have squares again. Is there something to add to your code?

 

Thanks

[minal]

Hello @Jeroen:

Add the line shown below to your previous css that you added recently.

.menu-item-has-children>a::after,

It should work fine.

Sincerely,

Minal

[Jeroen Smallegange]

Thank you

[Author]

Posts