FA генерирует иконки по своему, загляните в разметку (откройте панель разработчика).
Скорее-всего у Вас там не i
а svg
.
Задайте transform: rotate(-90deg);
а не rotateY
... .
И наконец - проверьте Ваш js , активный класс добавляете только раскрывающемуся контенту, когда иконка у Вас в заголовке (в другом блоке)!
Пример (для наглядности добавлен поворот стрелки в другую сторону):
const accordions = document.querySelectorAll('.accordion__card');
for (const accordion of accordions) {
const title = accordion.querySelector('.accordion__card__title');
const text = accordion.querySelector('.accordion__card__text');
title.addEventListener('click', () => {
if (text.classList.contains('accordion__card__text--active')) {
title.classList.remove('active');
text.classList.remove('accordion__card__text--active');
} else {
for (const accordion of accordions) {
const text = accordion.querySelector('.accordion__card__text');
text.classList.remove('accordion__card__text--active');
}
title.classList.add('active');
text.classList.add('accordion__card__text--active');
}
});
}
.accordion__card__title {
padding: 30px 0 30px 30px;
color: #f7654a;
font-size: 24px;
position: relative;
cursor: pointer;
}
.accordion__card__title .fa-arrow-right {
font-size: 18px;
position: absolute;
left: 0;
top: 40px;
transform: rotate(-90deg);
}
.accordion__card__title:hover .fa-arrow-right {
transform: rotate(-90deg);
}
.accordion__card__text {
font-size: 16px;
font-weight: 400;
font-family: "Open Sans", sans-serif;
color: #999999;
display: none;
margin-bottom: 20px;
}
.accordion__card__text--active {
display: block;
}
.accordion__card__title.active .fa-arrow-right {
transform: rotate(90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>
<section class="s-accordion section--long">
<div class="container">
<div class="section__title">ОТВЕТЫ НА ВОПРОСЫ</div>
<div class="accordion">
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
</div>
</div>
</section>
ИЛИ я бы переписала js, для удобства, так:
// Находим все триггеры по которым будем кликать:
let titles = document.querySelectorAll('.accordion__card__title');
// При клике на каждый триггер, выполняем функцию.
titles.forEach(title => title.addEventListener('click', Trigger));
// Функция
function Trigger() {
// Находим все карточки
let accordions = document.querySelectorAll('.accordion__card');
// И находим именну ту карточки нутри которой находится триггер (на который кликнули)
let accordion = this.closest('.accordion__card');
// Если карточка НЕ содержит активный класс
if (!accordion.classList.contains('active')) {
// У всех карточек удаляем активный класс
accordions.forEach((accordion) => accordion.classList.remove('active'));
// А именно нашей - добавляем
accordion.classList.add('active');
} else {
// Иначе удаляем и у нашей карточки активный класс
accordion.classList.remove('active');
}
}
.accordion__card__title {
padding: 30px 0 30px 30px;
color: #f7654a;
font-size: 24px;
position: relative;
cursor: pointer;
}
.accordion__card__title .fa-arrow-right {
font-size: 18px;
position: absolute;
left: 0;
top: 40px;
transform: rotate(-90deg);
}
.accordion__card__title:hover .fa-arrow-right {
transform: rotate(-90deg);
}
.accordion__card__text {
font-size: 16px;
font-weight: 400;
font-family: "Open Sans", sans-serif;
color: #999999;
display: none;
margin-bottom: 20px;
}
.accordion__card.active .accordion__card__text {
display: block;
}
.accordion__card.active .fa-arrow-right {
transform: rotate(90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>
<section class="s-accordion section--long">
<div class="container">
<div class="section__title">ОТВЕТЫ НА ВОПРОСЫ</div>
<div class="accordion">
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
<div class="accordion__card">
<div class="accordion__card__title"><i class="fas fa-arrow-right"></i>РАБОТАЕТЕ ЛИ ВЫ ПО 249 ФЗ?</div>
<div class="accordion__card__text">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
Lorem Ipsum для распечатки образцов.
</div>
</div>
</div>
</div>
</section>