您可以在单击的锚内切换i元素的类，如

<i class="fa fa-plus-circle"></i>

然后

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

参见工作示例：

$('#category-tabs li a').click(function() {
  $(this).next('ul').slideToggle('500');
  $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul id="category-tabs">
  <li>
    <a href="javascript:void">
      <i class="fa fa-plus-circle"></i> Category 1
    </a>
    <ul>
      <li><a href="javascript:void">item 1</a></li>
      <li><a href="javascript:void">item 2</a></li>
      <li><a href="javascript:void">item 3</a></li>
    </ul>
  </li>
</ul>

只需在a元素中包含的i元素上调用jQuery的toggleClass()，即可切换加号和减号图标：

...click(function() {
    $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
});

请注意，这假设默认情况下将fa-plus-circle类添加到i元素中。
JSFiddle demo。

您可以使用i元素的类定义来更改代码：

<a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>

然后，您可以使用toggleClass和多个类来切换表示加/减状态的类：

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
});

演示：http://jsfiddle.net/Zcn2u/

一般来说，它的工作原理是这样的：

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>

还有另一个解决方案，你可以尝试只使用CSS这里是我在另一篇文章中发布的答案：jQuery Accordion change font awesome icon class on click

<ul id="category-tabs">
    <li><a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>
        <ul>
            <li><a href="javascript:void">item 1</a></li>
            <li><a href="javascript:void">item 2</a></li>
            <li><a href="javascript:void">item 3</a></li>
        </ul>
    </li> </ul>

//Jquery

$(document).ready(function() {
    $('li').click(function() {
      $('i').toggleClass('fa-plus-square fa-minus-square');
    });
  });

JSFiddle