css - 单击时更改基础图标

Question

我想弄清楚如何在单击时更改按钮的图标。

<div class="row">
    <a class="slideout-button"><i class="general foundicon-left-arrow"></i
    </a>
</div>

我想在 slider 打开时更改为“foundicon-right-arrow”。

你们知道怎么做吗？

Answer 1

也许你只需要旋转你的图标而不是用 css rotate 替换他:

 .slideout-button.open i:before{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

和 jQuery 代码:

$(".slideout-button").on('click', function(){
      $(this).toggleClass('open');
});