Как использовать классы шрифтов для переключения вместо юникодов или изображений .svg - PullRequest
Новая
       58

Как использовать классы шрифтов для переключения вместо юникодов или изображений .svg

0 голосов
/ 21 октября 2019

Я хотел бы использовать классы font-awesome вместо unicodes или .svg (или любого изображения), чтобы получить тот же эффект переключения, что и у меня ниже. Однако я изо всех сил пытаюсь найти пример, где классы используются в HTML для переключения. Буду очень признателен за вашу помощь.

Вот мой CodePen, если вам будет проще: https://codepen.io/fergos2/pen/vYYgYzp

Тот же код приведен ниже, и обратите внимание, что font-awesome и jQuery импортируются вCodePen и то, что я использую 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>
...