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


I’m using the Quark theme and tried upgrading from FontAwesome 4 to 5 using the helpful comments provided by @pamtbaau 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

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.

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?



@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

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

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