如何使用 font-awesome 类而不是 unicodes 或 .svg 图像进行切换答案

【问题标题】：How to use font-awesome classes for toggles instead of unicodes or .svg images如何使用 font-awesome 类而不是 unicodes 或 .svg 图像进行切换
【发布时间】：2019-10-21 14:19:46
【问题描述】：

我想使用 font-awesome 类而不是 unicodes 或 .svg（或任何图像）来获得与下面相同的切换效果。但是，我正在努力寻找一个在 HTML 中使用类进行切换的示例。非常感谢您的帮助。

这是我的 CodePen，如果您觉得它更简单： https://codepen.io/fergos2/pen/vYYgYzp

下面是相同的代码，请注意在 CodePen 中导入了 font-awesome 和 jQuery，并且我使用 SCSS 作为 CSS 预处理器。

提前感谢您帮助我！

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
  });
});

.hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;

  display: flex;
  align-items: center;
}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;

  &:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f085"; // fas fa-cogs
  }
}

.toggle.active {
  background-color: red;

  &:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d"; // fas fa-times
  } 
}

.toggle-content {
  display: none;
}

.toggle-content.active{
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
}

<div class="container">
  <div class="wrapper">
    <div class="toggle"></div>
    <div class="toggle-content">
      <p>Some content</p>
    </div>
  </div>
</div>

更新用我下面的答案解决了。

【问题讨论】：

标签： jquery html toggle font-awesome font-awesome-5

【解决方案1】：

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
            $('.toggle-2-content').removeClass('active');
    }

    $(this).find('.toggle-icon').toggleClass('fa-plus-circle fa-times active');
    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');
  });

  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
            $('.toggle-1-content').removeClass('active');
    }

    $(this).find('.toggle-icon').toggleClass('fa-heart fa-times active');
    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

.hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;

  display: flex;
  align-items: center;
}

.toggle-1,
.toggle-2 {
    display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.toggle-icon {
  color: white;
  font-size: 10px;
  text-align: center;
}

.toggle-1.active,
.toggle-2.active {
  background-color: red;
  content: "\f342";
}

.toggle-1-content,
.toggle-2-content {
  display: none;
}

.toggle-1-content.active,
.toggle-2-content.active {
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
}

<div class="container">
  <div class="wrapper">


    <div class="toggle-1"><a href="javascript:void"><i class="toggle-icon fas fa-cogs"></i></a></div>
    <div class="toggle-1-content">
      <p>Some content</p>
    </div>

        <div class="toggle-2"><a href="javascript:void"><i class="toggle-icon fas fa-heart"></i></a></div>
    <div class="toggle-2-content">
      <p>Some content</p>
    </div>


  </div>
</div>

【讨论】：