Skip to content

Open-Iconic "Chevron-top" & "Chevron-down" Icon Non-existent in Mobile Layout

This is a continuation of this issue: Open-Iconic "Chevron-top" & "Chevron-down" Icon Non-existent in Mobile Layout (Part 2 of 4)

The <head></head> section does not contain the code <link rel="stylesheet" href="{{ '/static/fonts/open-iconic/font/css/open-iconic-bootstrap.css'|asseturl }}"> Source: https://gitlab.torproject.org/torproject/web/support/-/blob/master/templates/layout.html.

Disclaimer: this link was referenced in the meta.html file on line 5 in the community portal. This is how I deduced where we kept the css file in the lego repo. Stay tuned for more open-iconic clean up issues since that folder no longer exists in the lego repo, source: https://gitlab.torproject.org/torproject/web/lego/-/tree/master/assets/static/fonts.

Therefore, in the sidenav.html file on lines 8 & 9 respectively, when

        <span class="oi oi-chevron-top chevron-up"></span>
        <span class="oi oi-chevron-bottom chevron-down"></span>

is used, no icon shows up.

See the screenshots below -

Chevron up icon:

chevron-up

Chevron down icon:

chevron-down

I suggest that since we already have the navbar-toggler-icon class utilizing bootstrap's styling, we should use it here.

The fix would look like this:

navbar-toggler-icon