Subsitituir icone do Toggle

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: ModernBB

Descrição

Gostaria de substituir o ícone : http://prntscr.com/h52y5k
Por este:

Código:

fa-toggle-on

Se possível também, mostrando o efeito do botão se locomovendo.

Script usado:

Código:

(function ($) {
  'use strict';
 
  $(function () {
    var $el = $('.fa-catrow');
 
    $el.each(function (index, element) {
      var $this = $(this);
 
      $this.attr('data-id', 'cat-' + index);
      $this.attr('data-collapsed', function () {
        return localStorage.getItem($this.attr('data-id')) === 'true' ? 'true' : 'false';
      });
     
      $this
        .find('.fa-forumrow')
          .css('display', function () {
            return localStorage.getItem($this.attr('data-id')) === 'true' ? 'none' : 'flex';
          })
      ;
    });
 
    $el
      .find('.fa-category-toggler')
        .on('click', function () {
          var $this    = $(this);
          var $category = $this.parents('.fa-catrow');
          var id        = $category.attr('data-id');
 
          if ($category.attr('data-collapsed') === 'true') {
            $category
              .find('.fa-forumrow')
                .css('display', 'flex')
            ;
 
            localStorage.setItem(id, 'false');
            $category.attr('data-collapsed', 'false');
 
            return;
          }
 
          $category
            .find('.fa-forumrow')
              .hide()
          ;
 
          localStorage.setItem(id, 'true');
          $category.attr('data-collapsed', 'true');
        })
    ;
  });
}(jQuery));

Olá,

Precisaremos do index_box.
E eu não entendi isso:

Se possível também, mostrando o efeito do botão se locomovendo.

Luiz escreveu:Olá,

Precisaremos do index_box.

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
            <a href="javascript:void(0);" class="fa-category-toggler"><i class="fa fa-toggle-off fa-6"></i></a>
        </div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow" data-image="{catrow.forumrow.FORUM_FOLDER_IMG}">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                <div class="fa-forumrow-posts">{catrow.forumrow.POSTS}</br>
              <span class="posts">POSTS</span></div>
              </div>
            </div>
       
              <dd class="lastpost">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                   
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->
 
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </dd>
  </div>
 
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Luiz escreveu:E eu não entendi isso:

Se possível também, mostrando o efeito do botão se locomovendo.

Veja o exemplo deste fórum: samp.brasilplaystart.com.br/forum

Em sua Folha de Estilos, procure por:

Código:

.fa-catrow[data-collapsed="true"] .fa-category-toggler .fa::before

Em seguida, após a propriedade content, altere:

Código:

"\f067"

Por:

Código:

"\f205"

o/

Beleza, quanto ao efeito mencionado ?

É impossível animar a troca de ícones de fontes (como o FontAwesome) com CSS.
O efeito é outro no outro fórum, e para isso teríamos que trocar o JavaScript, o que é meio complicado de ser feito.

entendi, obrigado