Quark theme menu bar arrow-down icon issues after updating from FontAwesome 4 to 5

1

All,

I’m using the Quark theme and tried upgrading from FontAwesome 4 to 5 using the helpful comments provided by @anon76427325 under the discussion topic “Font Awesome issues”.

I understand their feedback was for the Antimatter rather than Quark theme but everything seemed to work well…except for the arrow-down icons in the menu bar.

Sometimes I see the arrow-down icons, sometimes I don’t. It depends upon the page I’ve selected. I have two examples below taken from my web page (Firefox using a private window to avoid cache issues).

Example 1: No problems

down_icon_good
down_icon_good1378×94 10.4 KB

Example 2: Down-arrow icons don’t render. Notice I’ve selected a different page. Both “DC Science” and “Notes” are the same page type.

down_icon_bad
down_icon_bad1388×98 9.66 KB

I don’t see the arrow-down icon directly referenced in a Twig template so I’m not sure of which file to modify or how to modify it. Can someone provide help?

Thanks,

Sean

2

@jerobapatrol, For the dropdown menu in Quark, the ‘arrow-down’ icon is not being referenced in Twig, but rather in css.

However, when Quark references FontAwesome in css, it references font-family: FontAwesome. When using the FontAwesome 5 free fonts, this should be font-family: 'Font Awesome 5 Free'.

To fix this you can override Quarks css used for the dropdown menu, by adding the following to the css in your inherited theme:

.dropmenu ul li a::before {
    font-family: 'Font Awesome 5 Free';
}

This could for example be copied into /user/themes/mytheme/css/custom.css

1 Like
3

@anon76427325 Your suggestion worked perfectly. Thank you for your help.

I placed your code snippet in my custom.css file in my inherited Quark theme.