title: Change navigation icon
body: <p>I have this below navigation in my page :</p>
  
  <pre><code>&lt;ul class="fa-ul" id="filter"&gt;
      &lt;li&gt;&lt;i class="fa-li fa fa-folder-o"&gt;&lt;/i&gt;&lt;a href="{{route('fotoindex')}}"&gt;Semua Foto&lt;/a&gt;&lt;/li&gt;
      @forelse($albums as $al)
      &lt;li&gt;&lt;i class="fa-li fa fa-folder-o"&gt;&lt;/i&gt;&lt;a href="{{route('fotofilter', $al-&gt;slug)}}" name="album"&gt;{{$al-&gt;nama}}&lt;/a&gt;&lt;/li&gt;
      @empty
      @endforelse
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've managed to add  <code>active</code> class to the <code>a</code> element when the url in the given <code>a</code> element is opened in the browser with below code :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      jQuery(function($) {
          var path = window.location.href;
          $('#filter li a').each(function() {
              if (this.href === path) {
                  $(this).addClass('active');
              }});
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And now I want to know how to change the <code>i</code> element icon class as well ? let's say if the url is opened I want to change the icon class from <code>fa-li fa fa-folder-o</code> to <code>fa-li fa fa-folder-open-o</code></p>
  
  <p>That's all and thanks!</p>