jQueryクリックイベントでアイコンを変更させたい

前提・実現したいこと

FontAwesomeを使用しています。
ハンバーガーメニューを表示・非表示させるアイコンを、メニューの状態によって変更したいです。

jQueryでアイコンのhtmlを書き換えたい(上書きしたい)のですが、
######元からあったアイコンの下に疑似要素::before で新しいアイコンが表示されてしまいます。

どうすれば、直せるか教えていただきたいです。
また、足りない情報等ございましたら追記しますので、よろしくお願い致します。

発生しているエラーメッセージはありません。

該当のソースコード

heml
1<body>
2  <header>
3    <div class="header">
4      <h1>Ryou</h1>
5      <ul>
6        <li><i id="menu-icon" class="fas fa-bars fa-fw"></i></li>
7      </ul>
8    </div>
9  </header>
10  <nav id="slide-menu">
11    <ul>
12      <li><a href="#profile-btn">Profile</a></li>
13      <li><a href="#skill-btn">Skill</a></li>
14      <li><a href="#works-btn">Works</a></li>
15      <li><a href="#service-btn">Service</a></li>
16      <li><a href="#contact-btn" class="contact-btn">お問い合わせ</a></li>
17      <ol>
18        <li><i class="fab fa-twitter fa-fw"></i></li>
19        <li><i class="fab fa-pinterest-p fa-fw"></i></li>
20      </ol>
21    </ul>
22  </nav>
23</body>

css
1
2/*ヘッダー*/
3header {
4	width: 100%;
5	height: 70px;
6	position: fixed;
7	top: 0;
8	left: 0;
9	background-color: LightSkyBlue;
10	z-index: 10;
11}
12
13.header {
14	width: 95%;
15	max-width: 1480px;
16	margin: 0 auto;
17	display: flex;
18	justify-content: space-between;
19}
20
21.header h1, .header a {
22	color: #fafafa;
23	line-height: 70px;
24}
25
26.header h1 {
27	letter-spacing: 0.075em;
28	font-size: 35px;
29	font-family: 'Dosis', sans-serif;
30	font-weight: bold:
31	cursor: pointer;
32}
33
34.header h1::before {
35	font-family: "Font Awesome 5 Free";
36	content: '\f1b0';
37	font-weight: 900;
38	margin-right: 0.3em;
39}
40
41.header li i {
42    display: block;
43    padding: 0 1em;
44    font-size: 1.2rem;
45    color: #fafafa;
46    line-height: 70px;
47  }
48
49
50/*スライドメニュー*/
51#slide-menu {
52	width: 300px;
53	height: calc(100vh - 70px);
54	position: fixed;
55	top: 70px;
56	right: 0;
57	z-index: 10;
58	background-color: #fafafa;
59
60	display: block;
61        transform: translateX(100%);
62        transition: transform 1s;
63}
64
65#slide-menu.active{
66        transform: translateX(0);
67    }
68
69#slide-menu li {
70	line-height: 2rem;
71	margin: 1rem 0;
72	text-align: center;
73}
74
75#slide-menu li a {
76	position: relative;
77	display: inline-block;
78	font-size: 1.25rem;
79	letter-spacing: 0.075em;
80	color: LightSkyBlue;
81}

JavaScript
1$('#menu-icon').click(function(){
2        $('#slide-menu').toggleClass('active');
3        if($('#slide-menu').hasClass('active')) {
4          // ハンバーガーアイコンを管理する
5          $('#menu-icon').html('<i class="fas fa-times fas-fw"></i>');
6        }
7      });

HTML
1アイコンクリック後(chrome検証機能より)
2<li>
3 <i id="menu-icon" class="fas fa-bars fa-fw">
4 ::before
5 <i class="fas fa-times fas-fw">
6 ::before
7 </i>
8 </i>
9</li>

試したこと

htmlだけでなく、CSSも変更するように記述しましたが、できませんでした。

補足情報（FW/ツールのバージョンなど）

html5・CSS3・FontAwesome5.11.1

行動規範の内容に同意します

回答2件

ベストアンサー

classを書き換えるのではなくいっそのこと要素を２つ準備しておいてhide,show切り替えては。

投稿2020/08/02 04:08

m.ts10806

総合スコア80875

.ryou

2020/08/02 07:06

回答ありがとうございます。無事実装できました。最初から２つとも用意しておくのは目からウロコでした。要素の表示・非表示の方法をもっと勉強しようと思います。ありがとうございました！

行動規範の内容に同意します

m.ts10806様に教えていただいた、最初からアイコンを２つ用意しておき、jQueryで表示・非表示を入れ替える方法で解決しました。

HTML
1
2<body>
3  <header>
4    <div class="header">
5      <h1>Ryou</h1>
6      <ul>
7        <!--↓初期アイコン-->
8        <li><i class="menu-icon fas fa-bars fa-fw"></i></li>
9        <!--↓メニューを非表示にするアイコン-->
10        <li><i class="menu-icon fas fa-times fa-fw"></i></li>
11      </ul>
12    </div>
13  </header>
14　<nav>
15   ⁝
16  </nav>
17 ⁝
18<body>
19

CSS
1
2.header ul li i { /*アイコンのデザインを設定*/
3	display: none;
4	padding: 0 1em;
5	font-size: 1.2rem;
6	color: #fafafa;
7	line-height: 70px;
8	cursor: pointer;
9	transition: .1s;
10}
11
12  .header li .fa-bars { /*初期アイコンを表示*/
13    display: block;
14  }
15
16
17.header li .fa-times { /*×アイコンを非表示*/
18    display: none;
19}
20

JavaScript
1
2$('.menu-icon').click(function(){
3        $('#slide-menu').toggleClass('active');
4        //メニューを表示
5        if($('#slide-menu').hasClass('active')) {
6          // ハンバーガーアイコンを管理
7          $('.fa-bars').hide();
8          $('.fa-times').show();
9}else {
10          // ハンバーガーアイコンを管理
11          $('.fa-times').hide();
12          $('.fa-bars').show();
13}
14});
15