I created a main menu with font "Font Awesome".
I want the collapse menu to display a "plus" when closed and a "minus" when open.
If I use the method "Web Fonts with CSS", it works with the CSS below.
But if I use the "SVG with JavaScript" method, it does not work.
How to correctly display the font with the methide SVG ?
Here is the page concerned, it is in the menu on the left :
https://www.s1biose.com/groupe/recettes-et-astuces
Here is the CSS and HTML code of my menu:
#block-menuprincipal li.dropdown > a:before {
font-family: "Font Awesome 5 Free";
content: "\f055";
font-weight: 900;
font-size: 1.33333em;
line-height: .75em;
vertical-align: -.0667em;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
#block-menuprincipal li.dropdown > a[aria-expanded=true]:before {
font-family: "Font Awesome 5 Free";
content: "\f056";
font-weight: 900;
font-size: 1.33333em;
line-height: .75em;
vertical-align: -.0667em;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}<nav role="navigation" aria-labelledby="block-navigationprincipale-menu" id="block-navigationprincipale">
<ul class="menu nav navbar-nav">
<li class="expanded dropdown open">
<a href="/boutique" class="dropdown-toggle" data-toggle="dropdown"> Stores</a>
<ul class="menu dropdown-menu">
<li>
<a href="/boutique" data-drupal-link-system-path="boutique"><i class="fas fa-shopping-bag fa-lg" aria-hidden="true"></i> Stores</a>
</li>
<li>
<a href="/produit" data-drupal-link-system-path="produit"><i class="fas fa-gift fa-lg" aria-hidden="true"></i> Products</a>
</li>
<li>
<a href="/service" data-drupal-link-system-path="service"><i class="fas fa-sign-language fa-lg" aria-hidden="true"></i> Services</a>
</li>
</ul>
</li>
<li class="expanded dropdown">
<a href="/groupe" class="dropdown-toggle" data-toggle="dropdown"> Groups</a>
<ul class="menu dropdown-menu">
<li>
<a href="/groupe" data-drupal-link-system-path="groupe"><i class="fas fa-users fa-lg" aria-hidden="true"></i> Groups</a>
</li>
<li>
<a href="/annonce" data-drupal-link-system-path="annonce"><i class="fas fa-newspaper fa-lg" aria-hidden="true"></i> Ads</a>
</li>
<li>
<a href="/article" data-drupal-link-system-path="article"><i class="fas fa-file-alt fa-lg" aria-hidden="true"></i> Articles</a>
</li>
<li>
<a href="/discussion" data-drupal-link-system-path="discussion"><i class="fas fa-comments fa-lg" aria-hidden="true"></i> Discussions</a>
</li>
<li>
<a href="/recette" data-drupal-link-system-path="recette"><i class="fas fa-utensils fa-lg" aria-hidden="true"></i> Recipes</a>
</li>
<li>
<a href="/itineraire" data-drupal-link-system-path="itineraire"><i class="fas fa-map-signs fa-lg" aria-hidden="true"></i> Itineraries</a>
</li>
<li>
<a href="/evenement" data-drupal-link-system-path="evenement"><i class="fas fa-calendar fa-lg" aria-hidden="true"></i> Events</a>
</li>
</ul>
</li>
<li>
<a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg" aria-hidden="true"></i> Profiles</a>
</li>
</ul>
</nav>Web Fonts with CSS
SVG with JavaScript
