如何在菜单打开时更改字体“Font Awesome”（使用SVG方法）？

Question

我创建了一个主菜单，字体为“Font Awesome”。

我希望折叠菜单在关闭时显示“加号”，在打开时显示“减号”。

如果我使用“带有CSS的Web字体”方法，它可以使用下面的CSS。

但是如果我使用“带有JavaScript的SVG”方法，它就不起作用。

如何使用甲基化SVG正确显示字体？

这是相关页面，它位于左侧菜单中：

https://www.s1biose.com/groupe/recettes-et-astuces

以下是我的菜单的CSS和HTML代码：

#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>

  

带CSS的网络字体

enter image description here

  

使用JavaScript的SVG

enter image description here