title: how to toggle with font-awesome icons instead of text in jquery
body: <p>For making a bootstrap modal fullscreen, i use this toggle which works fine.</p>
  <pre><code>&lt;!-- Modal content--&gt;
  &lt;div class=&quot;modal-content&quot;&gt;
      
      &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h3 class=&quot;modal-title&quot;&gt;Title&lt;/h3&gt;
          &lt;span class=&quot;fullscreen&quot;&gt;Expand&lt;/span&gt; &lt;!-- toggle trigger text --&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
          
      &lt;/div&gt;
      ...
  </code></pre>
  <p>My jquery:</p>
  <pre><code>// fullscreen modal
  $(&quot;.fullscreen&quot;).on('click', function() {
    if($(this).text() == 'Expand'){
         $(this).text('Collapse');
         $(&quot;.modal-dialog&quot;).addClass(&quot;modal-fullscreen&quot;);
      }else{
         $(this).text('Expand');
         $(&quot;.modal-dialog&quot;).removeClass(&quot;modal-fullscreen&quot;);
      }
  });
  
  </code></pre>
  <p>Now i want to change the words <code>Expand</code> and <code>collapse</code> with font-awesome icons but this the way i tried it below, the toggle does not work anymore because it is not text anymore...</p>
  <pre><code>&lt;!-- Modal content--&gt;
  &lt;div class=&quot;modal-content&quot;&gt;
  
      &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h3 class=&quot;modal-title&quot;&gt;Title&lt;/h3&gt;
          &lt;span class=&quot;fullscreen&quot;&gt;&lt;i class=&quot;fas fa-expand-arrows-alt&quot;&gt;&lt;/i&gt;&lt;/span&gt; &lt;!-- toggle trigger icon --&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
  
      &lt;/div&gt;
      ...
  
  //jquery
  // fullscreen modal
  $(&quot;.fullscreen&quot;).on('click', function() {
    if($(this).text() == '&lt;i class=&quot;fas fa-expand-arrows-alt&quot;&gt;&lt;/i&gt;'){
         $(this).text('&lt;i class=&quot;fas fa-compress-arrows-alt&quot;&gt;&lt;/i&gt;');
         $(&quot;.modal-dialog&quot;).addClass(&quot;modal-fullscreen&quot;);
      }else{
         $(this).text('&lt;i class=&quot;fas fa-expand-arrows-alt&quot;&gt;&lt;/i&gt;');
         $(&quot;.modal-dialog&quot;).removeClass(&quot;modal-fullscreen&quot;);
      }
  });
  
  </code></pre>
  <p>How can i make this work with the font-awesome icons?</p>