From 1706de9383d505fa885897aaf59f8d025ae33ec8 Mon Sep 17 00:00:00 2001
From: Lorenzo Miniero <lminiero@gmail.com>
Date: Wed, 29 Nov 2023 18:53:15 +0100
Subject: [PATCH] Updated demos and docs to font-awesome 6.x

---
 docs/doxy-boot.js           | 22 +++++++++++-----------
 html/admin.html             | 12 ++++++------
 html/admin.js               | 12 ++++++------
 html/audiobridgetest.html   |  4 ++--
 html/audiobridgetest.js     | 12 ++++++------
 html/canvas.html            | 12 ++++++------
 html/canvas.js              |  4 ++--
 html/css/demo.css           |  2 +-
 html/devicetest.html        |  6 +++---
 html/devicetest.js          |  8 ++++----
 html/e2etest.html           |  6 +++---
 html/e2etest.js             |  8 ++++----
 html/echotest.html          |  6 +++---
 html/echotest.js            |  8 ++++----
 html/multiopus.html         |  6 +++---
 html/multiopus.js           |  4 ++--
 html/mvideoroomtest.html    |  4 ++--
 html/mvideoroomtest.js      | 10 +++++-----
 html/nosiptest.html         |  2 +-
 html/nosiptest.js           |  8 ++++----
 html/recordplaytest.html    |  6 +++---
 html/recordplaytest.js      |  8 ++++----
 html/screensharingtest.html |  6 +++---
 html/screensharingtest.js   |  8 ++++----
 html/siptest.html           | 16 ++++++++--------
 html/siptest.js             | 32 ++++++++++++++++----------------
 html/streamingtest.html     |  6 +++---
 html/streamingtest.js       |  4 ++--
 html/textroomtest.html      |  6 +++---
 html/videocalltest.html     | 10 +++++-----
 html/videocalltest.js       |  8 ++++----
 html/videoroomtest.html     |  4 ++--
 html/videoroomtest.js       | 10 +++++-----
 html/virtualbg.html         |  2 +-
 html/virtualbg.js           |  8 ++++----
 html/webaudio.html          |  2 +-
 36 files changed, 146 insertions(+), 146 deletions(-)

diff --git a/docs/doxy-boot.js b/docs/doxy-boot.js
index b5650f2da8..7cf579c90b 100644
--- a/docs/doxy-boot.js
+++ b/docs/doxy-boot.js
@@ -3,18 +3,18 @@ $(document).ready(function() {
 	$("div.headertitle").addClass("pb-2 mt-4 mb-2 border-bottom");
 	$("div.title").addClass("h1");
 
-	$('li > a[href="index.html"] > span').before("<i class='fa fa-cog'></i> ");
+	$('li > a[href="index.html"] > span').before("<i class='fa-solid fa-gear'></i> ");
 	// $('li > a[href="index.html"] > span').text("CoActionOS");
-	$('li > a[href="modules.html"] > span').before("<i class='fa fa-square'></i> ");
-	$('li > a[href="namespaces.html"] > span').before("<i class='fa fa-bars'></i> ");
-	$('li > a[href="annotated.html"] > span').before("<i class='fa fa-list-ul'></i> ");
-	$('li > a[href="classes.html"] > span').before("<i class='fa fa-book'></i> ");
-	$('li > a[href="inherits.html"] > span').before("<i class='fa fa-sitemap'></i> ");
-	$('li > a[href="functions.html"] > span').before("<i class='fa fa-list'></i> ");
-	$('li > a[href="functions_func.html"] > span').before("<i class='fa fa-list'></i> ");
-	$('li > a[href="functions_vars.html"] > span').before("<i class='fa fa-list'></i> ");
-	$('li > a[href="functions_enum.html"] > span').before("<i class='fa fa-list'></i> ");
-	$('li > a[href="functions_eval.html"] > span').before("<i class='fa fa-list'></i> ");
+	$('li > a[href="modules.html"] > span').before("<i class='fa-solid fa-square'></i> ");
+	$('li > a[href="namespaces.html"] > span').before("<i class='fa-solid fa-bars'></i> ");
+	$('li > a[href="annotated.html"] > span').before("<i class='fa-solid fa-list-ul'></i> ");
+	$('li > a[href="classes.html"] > span').before("<i class='fa-solid fa-book'></i> ");
+	$('li > a[href="inherits.html"] > span').before("<i class='fa-solid fa-sitemap'></i> ");
+	$('li > a[href="functions.html"] > span').before("<i class='fa-solid fa-list'></i> ");
+	$('li > a[href="functions_func.html"] > span').before("<i class='fa-solid fa-list'></i> ");
+	$('li > a[href="functions_vars.html"] > span').before("<i class='fa-solid fa-list'></i> ");
+	$('li > a[href="functions_enum.html"] > span').before("<i class='fa-solid fa-list'></i> ");
+	$('li > a[href="functions_eval.html"] > span').before("<i class='fa-solid fa-list'></i> ");
 	$('img[src="ftv2ns.png"]').replaceWith('<span class="badge bg-danger">N</span> ');
 	$('img[src="ftv2cl.png"]').replaceWith('<span class="badge bg-danger">C</span> ');
 
diff --git a/html/admin.html b/html/admin.html
index 5e43f4935e..876a42321b 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -21,7 +21,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 </head>
 <body>
 
@@ -116,7 +116,7 @@ <h5>Loggers</h5>
 						</div>
 					</div>
 					<div role="tabpanel" class="tab-pane fade" id="settings">
-						<h5>Settings <i id="update-settings" class="fa fa-refresh" title="Refresh settings" style="cursor: pointer;"></i></h5>
+						<h5>Settings <i id="update-settings" class="fa-solid fa-rotate" title="Refresh settings" style="cursor: pointer;"></i></h5>
 						<div>
 							<table class="table table-striped" id="server-settings">
 							</table>
@@ -165,17 +165,17 @@ <h5>Response</h5>
 					<div role="tabpanel" class="tab-pane fade" id="handlesinfo">
 						<div class="row">
 							<div id="sessions" class="col-md-2">
-								<h5>Sessions (<span id="sessions-num">0</span>) <i id="update-sessions" class="fa fa-refresh" title="Refresh list of sessions" style="cursor: pointer;"></i></h5>
+								<h5>Sessions (<span id="sessions-num">0</span>) <i id="update-sessions" class="fa-solid fa-rotate" title="Refresh list of sessions" style="cursor: pointer;"></i></h5>
 								<div id="sessions-list" class="list-group">
 								</div>
 							</div>
 							<div id="handles" class="col-md-2">
-								<h5>Handles (<span id="handles-num"></span>) <i id="update-handles" class="fa fa-refresh" title="Refresh list of handles" style="cursor: pointer;"></i></h5>
+								<h5>Handles (<span id="handles-num"></span>) <i id="update-handles" class="fa-solid fa-rotate" title="Refresh list of handles" style="cursor: pointer;"></i></h5>
 								<div id="handles-list" class="list-group">
 								</div>
 							</div>
 							<div id="info" class="col-md-8">
-								<h5>Handle Info <i id="update-handle" class="fa fa-refresh" title="Refresh handle info" style="cursor: pointer;"></i></h5>
+								<h5>Handle Info <i id="update-handle" class="fa-solid fa-rotate" title="Refresh handle info" style="cursor: pointer;"></i></h5>
 								<div id="options" class="hide">
 									<label class="checkbox-inline" title="Autorefresh this info every 5s">
 										<input id="autorefresh" type="checkbox" value="" title="Autorefresh this info every 5s">Autorefresh
@@ -194,7 +194,7 @@ <h5>Handle Info <i id="update-handle" class="fa fa-refresh" title="Refresh handl
 						</div>
 					</div>
 					<div role="tabpanel" class="tab-pane fade" id="tokens">
-						<h5>Stored Tokens <i id="update-tokens" class="fa fa-refresh" title="Refresh tokens" style="cursor: pointer;"></i></h5>
+						<h5>Stored Tokens <i id="update-tokens" class="fa-solid fa-rotate" title="Refresh tokens" style="cursor: pointer;"></i></h5>
 						<div>
 							<table class="table table-striped" id="auth-tokens">
 							</table>
diff --git a/html/admin.js b/html/admin.js
index edef5a72f0..e2a68ccd3c 100644
--- a/html/admin.js
+++ b/html/admin.js
@@ -50,11 +50,11 @@ function promptAccessDetails() {
 	let secretPlaceholder = "Insert the Admin API secret";
 	bootbox.alert({
 		message: "<div class='input-group mt-3 mb-1'>" +
-			"	<span class='input-group-text'><i class='fa fa-cloud-upload fa-fw'></i></span>" +
+			"	<span class='input-group-text'><i class='fa-solid fa-cloud-arrow-up'></i></span>" +
 			"	<input class='form-control' type='text' value='" + server + "' placeholder='" + serverPlaceholder + "' autocomplete='off' id='server'></input>" +
 			"</div>" +
 			"<div class='input-group mt-3 mb-1'>" +
-			"	<span class='input-group-text'><i class='fa fa-key fa-fw'></i></span>" +
+			"	<span class='input-group-text'><i class='fa-solid fa-key'></i></span>" +
 			"	<input class='form-control' type='password'  value='" + secret + "'placeholder='" + secretPlaceholder + "' autocomplete='off' id='secret'></input>" +
 			"</div>",
 		closeButton: false,
@@ -617,7 +617,7 @@ function resetPluginRequest() {
 		'	<th></th>' +
 		'</tr>' +
 		'<tr>' +
-		'	<td><i id="addattr" class="fa fa-plus-circle" style="cursor: pointer;"></i></td>' +
+		'	<td><i id="addattr" class="fa-solid fa-plus-circle" style="cursor: pointer;"></i></td>' +
 		'	<td></td>' +
 		'	<td></td>' +
 		'	<td><button id="sendmsg" type="button" class="btn btn-xs btn-success pull-right">Send message</button></td>' +
@@ -683,7 +683,7 @@ function addPluginMessageAttribute() {
 		'			<option>boolean</option>' +
 		'		</select>' +
 		'	</td>' +
-		'	<td><i id="rmattr' + num + '" class="fa fa-window-close" style="cursor: pointer;"></i></td>' +
+		'	<td><i id="rmattr' + num + '" class="fa-solid fa-rectangle-xmark" style="cursor: pointer;"></i></td>' +
 		'</tr>'
 	);
 	$('#rmattr' + num).click(function() {
@@ -748,7 +748,7 @@ function resetTransportRequest() {
 		'	<th></th>' +
 		'</tr>' +
 		'<tr>' +
-		'	<td><i id="traddattr" class="fa fa-plus-circle" style="cursor: pointer;"></i></td>' +
+		'	<td><i id="traddattr" class="fa-solid fa-plus-circle" style="cursor: pointer;"></i></td>' +
 		'	<td></td>' +
 		'	<td></td>' +
 		'	<td><button id="trsendmsg" type="button" class="btn btn-xs btn-success pull-right">Send message</button></td>' +
@@ -814,7 +814,7 @@ function addTransportMessageAttribute() {
 		'			<option>boolean</option>' +
 		'		</select>' +
 		'	</td>' +
-		'	<td><i id="rmtrattr' + num + '" class="fa fa-window-close" style="cursor: pointer;"></i></td>' +
+		'	<td><i id="rmtrattr' + num + '" class="fa-solid fa-rectangle-xmark" style="cursor: pointer;"></i></td>' +
 		'</tr>'
 	);
 	$('#rmtrattr' + num).click(function() {
diff --git a/html/audiobridgetest.html b/html/audiobridgetest.html
index 2258aca9a8..c8a2d6d6b5 100644
--- a/html/audiobridgetest.html
+++ b/html/audiobridgetest.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" type="text/css"/>
 </head>
 <body>
@@ -69,7 +69,7 @@ <h3>Demo details</h3>
 					<span class="badge bg-info" id="you"></span>
 					<div class="col-md-12" id="controls">
 						<div class="input-group mt-3 mb-1 hide" id="registernow">
-							<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
 							<input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);" />
 							<span class="input-group-btn">
 								<button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
diff --git a/html/audiobridgetest.js b/html/audiobridgetest.js
index a4769a4b62..8a8569a176 100644
--- a/html/audiobridgetest.js
+++ b/html/audiobridgetest.js
@@ -157,8 +157,8 @@ $(document).ready(function() {
 														$('#list').append('<li id="rp' + id +'" class="list-group-item">' +
 															slider +
 															display +
-															' <i class="absetup fa fa-chain-broken"></i>' +
-															' <i class="abmuted fa fa-microphone-slash"></i></li>');
+															' <i class="absetup fa-solid fa-link-slash"></i>' +
+															' <i class="abmuted fa-solid fa-microphone-slash"></i></li>');
 														if(spatial !== null && spatial !== undefined) {
 															$('#sp' + id).slider({ min: 0, max: 100, step: 1, value: 50, handle: 'triangle', enabled: false });
 															$('#position').removeClass('hide');
@@ -201,8 +201,8 @@ $(document).ready(function() {
 														$('#list').append('<li id="rp' + id +'" class="list-group-item">' +
 															slider +
 															display +
-															' <i class="absetup fa fa-chain-broken"></i>' +
-															' <i class="abmuted fa fa-microphone-slash"></i></li>');
+															' <i class="absetup fa-solid fa-link-slash"></i>' +
+															' <i class="abmuted fa-solid fa-microphone-slash"></i></li>');
 														if(spatial !== null && spatial !== undefined) {
 															$('#sp' + id).slider({ min: 0, max: 100, step: 1, value: 50, handle: 'triangle', enabled: false });
 															$('#position').removeClass('hide');
@@ -246,8 +246,8 @@ $(document).ready(function() {
 														$('#list').append('<li id="rp' + id +'" class="list-group-item">' +
 															slider +
 															display +
-															' <i class="absetup fa fa-chain-broken"></i>' +
-															' <i class="abmuted fa fa-microphone-slash"></i></li>');
+															' <i class="absetup fa-solid fa-link-slash"></i>' +
+															' <i class="abmuted fa-solid fa-microphone-slash"></i></li>');
 														if(spatial !== null && spatial !== undefined) {
 															$('#sp' + id).slider({ min: 0, max: 100, step: 1, value: 50, handle: 'triangle', enabled: false });
 															$('#position').removeClass('hide');
diff --git a/html/canvas.html b/html/canvas.html
index 3eb7e3d582..214fba3481 100644
--- a/html/canvas.html
+++ b/html/canvas.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -117,23 +117,23 @@ <h3 class="mt-3">Demo details</h3>
 								</div>
 								<div class="card-body" id="tweaks">
 									<div class="input-group mb-2">
-										<span class="input-group-text"><i class="fa fa-font fa-fw"></i></span>
+										<span class="input-group-text"><i class="fa-solid fa-font"></i></span>
 										<input type="text" class="form-control" autocomplete="off" id="font" onkeypress="return checkEnter(event);"></input>
 									</div>
 									<div class="input-group mt-2 mb-2">
-										<span class="input-group-text"><i class="fa fa-eraser fa-fw"></i></span>
+										<span class="input-group-text"><i class="fa-solid fa-eraser"></i></span>
 										<input type="text" class="form-control" autocomplete="off" id="color" onkeypress="return checkEnter(event);"></input>
 									</div>
 									<div class="input-group mt-2 mb-2">
-										<span class="input-group-text"><i class="fa fa-text-width fa-fw"></i></span>
+										<span class="input-group-text"><i class="fa-solid fa-text-width"></i></span>
 										<input type="text" class="form-control" autocomplete="off" id="posX" onkeypress="return checkEnter(event);"></input>
 									</div>
 									<div class="input-group mt-2 mb-2">
-										<span class="input-group-text"><i class="fa fa-text-height fa-fw"></i></span>
+										<span class="input-group-text"><i class="fa-solid fa-text-height"></i></span>
 										<input type="text" class="form-control" autocomplete="off" id="posY" onkeypress="return checkEnter(event);"></input>
 									</div>
 									<div class="input-group mt-2">
-										<span class="input-group-text"><i class="fa fa-edit fa-fw"></i></span>
+										<span class="input-group-text"><i class="fa-solid fa-pen-to-square"></i></span>
 										<input type="text" class="form-control" autocomplete="off" id="text" onkeypress="return checkEnter(event);"></input>
 									</div>
 								</div>
diff --git a/html/canvas.js b/html/canvas.js
index cbe89cdb44..6aa95835b3 100644
--- a/html/canvas.js
+++ b/html/canvas.js
@@ -191,7 +191,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -219,7 +219,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/css/demo.css b/html/css/demo.css
index 08533d00ff..e1f5425fb6 100644
--- a/html/css/demo.css
+++ b/html/css/demo.css
@@ -111,7 +111,7 @@ a {
 .fa-4 {
 	font-size: 7em !important;
 }
-.fa-5 {
+.fa-xl {
 	font-size: 12em !important;
 }
 .fa-6 {
diff --git a/html/devicetest.html b/html/devicetest.html
index 3df9f25e94..52354bb088 100644
--- a/html/devicetest.html
+++ b/html/devicetest.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -120,7 +120,7 @@ <h3 class="mt-3">Demo details</h3>
 							<div class="card-body" id="videoleft"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-up"></i></span>
 							<input type="text" class="form-control" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(event);" disabled>
 						</div>
 					</div>
@@ -142,7 +142,7 @@ <h3 class="mt-3">Demo details</h3>
 							<div class="card-body" id="videoright"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-down"></i></span>
 							<input type="text" class="form-control" id="datarecv" disabled>
 						</div>
 					</div>
diff --git a/html/devicetest.js b/html/devicetest.js
index 09b1d9e6cc..cfac43efc3 100644
--- a/html/devicetest.js
+++ b/html/devicetest.js
@@ -329,7 +329,7 @@ $(document).ready(function() {
 												if($('#videoleft .no-video-container').length === 0) {
 													$('#videoleft').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -354,7 +354,7 @@ $(document).ready(function() {
 											if($('#videoleft .no-video-container').length === 0) {
 												$('#videoleft').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -396,7 +396,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -424,7 +424,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/e2etest.html b/html/e2etest.html
index 52f1012f90..322c20add9 100644
--- a/html/e2etest.html
+++ b/html/e2etest.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -100,7 +100,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoleft"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-up"></i></span>
 							<input type="text" class="form-control" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(event);" disabled>
 						</div>
 					</div>
@@ -112,7 +112,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoright"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-down"></i></span>
 							<input type="text" class="form-control" id="datarecv" disabled>
 						</div>
 					</div>
diff --git a/html/e2etest.js b/html/e2etest.js
index 164acffb3a..83c21d4f3b 100644
--- a/html/e2etest.js
+++ b/html/e2etest.js
@@ -176,7 +176,7 @@ $(document).ready(function() {
 												if($('#videoleft .no-video-container').length === 0) {
 													$('#videoleft').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -201,7 +201,7 @@ $(document).ready(function() {
 											if($('#videoleft .no-video-container').length === 0) {
 												$('#videoleft').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -240,7 +240,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -268,7 +268,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/echotest.html b/html/echotest.html
index 452d071e71..49b8320d16 100644
--- a/html/echotest.html
+++ b/html/echotest.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -121,7 +121,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoleft"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-up"></i></span>
 							<input type="text" class="form-control" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(event);" disabled>
 						</div>
 					</div>
@@ -133,7 +133,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoright"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-down"></i></span>
 							<input type="text" class="form-control" id="datarecv" disabled>
 						</div>
 					</div>
diff --git a/html/echotest.js b/html/echotest.js
index 8d6e1b0c8d..57af8e4e66 100644
--- a/html/echotest.js
+++ b/html/echotest.js
@@ -246,7 +246,7 @@ $(document).ready(function() {
 												if($('#videoleft .no-video-container').length === 0) {
 													$('#videoleft').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -271,7 +271,7 @@ $(document).ready(function() {
 											if($('#videoleft .no-video-container').length === 0) {
 												$('#videoleft').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -314,7 +314,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -342,7 +342,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/multiopus.html b/html/multiopus.html
index 11c6ceab0c..8c68308fea 100644
--- a/html/multiopus.html
+++ b/html/multiopus.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -111,7 +111,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoleft"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-up"></i></span>
 							<input type="text" class="form-control" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(event);" disabled>
 						</div>
 					</div>
@@ -123,7 +123,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoright"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-down"></i></span>
 							<input type="text" class="form-control" id="datarecv" disabled>
 						</div>
 					</div>
diff --git a/html/multiopus.js b/html/multiopus.js
index f2d1e28168..fcdaf94d22 100644
--- a/html/multiopus.js
+++ b/html/multiopus.js
@@ -223,7 +223,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -251,7 +251,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/mvideoroomtest.html b/html/mvideoroomtest.html
index 1a5ee7f5be..fb62e7783a 100644
--- a/html/mvideoroomtest.html
+++ b/html/mvideoroomtest.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -69,7 +69,7 @@ <h3>Demo details</h3>
 					<span class="badge bg-info" id="you"></span>
 					<div class="col-md-12" id="controls">
 						<div class="input-group mt-3 mb-1 hide" id="registernow">
-							<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
 							<input autocomplete="off" class="form-control" autocomplete="off" type="text" placeholder="Choose a display name" id="username" onkeypress="return checkEnter(this, event);"></input>
 							<span class="input-group-btn">
 								<button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
diff --git a/html/mvideoroomtest.js b/html/mvideoroomtest.js
index f40c40223e..dfd63f1bf3 100644
--- a/html/mvideoroomtest.js
+++ b/html/mvideoroomtest.js
@@ -278,7 +278,7 @@ $(document).ready(function() {
 											$('#myvideo').addClass('hide');
 											$('#videolocal').append(
 												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon" style="height: 100%;"></i>' +
+													'<i class="fa-solid fa-video fa-xl no-video-icon" style="height: 100%;"></i>' +
 													'<span class="no-video-text" style="font-size: 16px;">Video rejected, no webcam</span>' +
 												'</div>');
 										}
@@ -310,7 +310,7 @@ $(document).ready(function() {
 												if($('#videolocal .no-video-container').length === 0) {
 													$('#videolocal').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -341,7 +341,7 @@ $(document).ready(function() {
 											if($('#videolocal .no-video-container').length === 0) {
 												$('#videolocal').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -797,7 +797,7 @@ function subscribeTo(sources) {
 							if($('#videoremote' + slot + ' .no-video-container').length === 0) {
 								$('#videoremote' + slot).append(
 									'<div class="no-video-container">' +
-										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 										'<span class="no-video-text">No remote video available</span>' +
 									'</div>');
 							}
@@ -827,7 +827,7 @@ function subscribeTo(sources) {
 						if($('#videoremote' + slot + ' .no-video-container').length === 0) {
 							$('#videoremote' + slot).append(
 								'<div class="no-video-container">' +
-									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 									'<span class="no-video-text">No remote video available</span>' +
 								'</div>');
 						}
diff --git a/html/nosiptest.html b/html/nosiptest.html
index cd78f1cc5b..c5bc3a890c 100644
--- a/html/nosiptest.html
+++ b/html/nosiptest.html
@@ -26,7 +26,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 </head>
 <body>
 
diff --git a/html/nosiptest.js b/html/nosiptest.js
index c523ab7cc2..0f79c41b65 100644
--- a/html/nosiptest.js
+++ b/html/nosiptest.js
@@ -195,7 +195,7 @@ $(document).ready(function() {
 												if($('#videoleft .no-video-container').length === 0) {
 													$('#videoleft').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -220,7 +220,7 @@ $(document).ready(function() {
 											if($('#videoleft .no-video-container').length === 0) {
 												$('#videoleft').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -259,7 +259,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -300,7 +300,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No remote video available</span>' +
 													'</div>');
 											}
diff --git a/html/recordplaytest.html b/html/recordplaytest.html
index 5bb1f42f75..24b07ea477 100644
--- a/html/recordplaytest.html
+++ b/html/recordplaytest.html
@@ -26,7 +26,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 </head>
 <body>
 
@@ -73,7 +73,7 @@ <h3>Demo details</h3>
 								<div class="btn-group btn-group-sm">
 									<button class="btn btn-danger" disabled autocomplete="off" id="record">Record</button>
 									<button class="btn btn-success" disabled autocomplete="off" id="play">Play</button>
-									<button class="btn btn-primary" disabled autocomplete="off" id="list">Update <i id="update-list" class="fa fa-refresh"></i></button>
+									<button class="btn btn-primary" disabled autocomplete="off" id="list">Update <i id="update-list" class="fa-solid fa-rotate"></i></button>
 								</div>
 								<br/>
 								<div class="btn-group btn-group-sm w-100">
@@ -100,7 +100,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videobox"></div>
 						</div>
 						<div class="input-group mt-3 mb-3 hide">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-down"></i></span>
 							<input type="text" class="form-control" id="datafield" disabled>
 						</div>
 					</div>
diff --git a/html/recordplaytest.js b/html/recordplaytest.js
index 7e7899220d..d60d9cb8d3 100644
--- a/html/recordplaytest.js
+++ b/html/recordplaytest.js
@@ -224,7 +224,7 @@ $(document).ready(function() {
 												if($('#videobox .no-video-container').length === 0) {
 													$('#videobox').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -249,7 +249,7 @@ $(document).ready(function() {
 											if($('#videobox .no-video-container').length === 0) {
 												$('#videobox').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -294,7 +294,7 @@ $(document).ready(function() {
 												if($('#videobox .no-video-container').length === 0) {
 													$('#videobox').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -323,7 +323,7 @@ $(document).ready(function() {
 											if($('#videobox .no-video-container').length === 0) {
 												$('#videobox').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No remote video available</span>' +
 													'</div>');
 											}
diff --git a/html/screensharingtest.html b/html/screensharingtest.html
index 0279891df6..3b0b80ea59 100644
--- a/html/screensharingtest.html
+++ b/html/screensharingtest.html
@@ -26,7 +26,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 </head>
 <body>
 
@@ -71,7 +71,7 @@ <h3>Demo details</h3>
 			<div class="container mt-5 hide" id="screenmenu">
 				<div class="row col-md-12">
 					<div class="input-group mt-3 mb-1 hide" id="createnow">
-						<span class="input-group-text"><i class="fa fa-users fa-1"></i></span>
+						<span class="input-group-text"><i class="fa-solid fa-users"></i></span>
 						<input class="form-control" type="text" placeholder="Insert a title for the session" autocomplete="off" id="desc" onkeypress="return checkEnterShare(this, event);" />
 						<span class="input-group-btn">
 							<button class="btn btn-success" autocomplete="off" id="create">Share your screen</button>
@@ -83,7 +83,7 @@ <h3>Demo details</h3>
 				</div>
 				<div class="row col-md-12">
 					<div class="input-group mt-1 mb-1 hide" id="joinnow">
-						<span class="input-group-text"><i class="fa fa-play-circle fa-1"></i></span>
+						<span class="input-group-text"><i class="fa-solid fa-circle-play"></i></span>
 						<input class="form-control" type="text" placeholder="Insert the numeric session identifier" autocomplete="off" id="roomid" onkeypress="return checkEnterJoin(this, event);" />
 						<span class="input-group-btn">
 							<button class="btn btn-success" autocomplete="off" id="join">Join an existing session</button>
diff --git a/html/screensharingtest.js b/html/screensharingtest.js
index 22ea175f6e..a2942c71d5 100644
--- a/html/screensharingtest.js
+++ b/html/screensharingtest.js
@@ -234,7 +234,7 @@ $(document).ready(function() {
 												if($('#screencapture .no-video-container').length === 0) {
 													$('#screencapture').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -258,7 +258,7 @@ $(document).ready(function() {
 											if($('#screencapture .no-video-container').length === 0) {
 												$('#screencapture').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -528,7 +528,7 @@ function newRemoteFeed(id, display) {
 							if($('#screencapture .no-video-container').length === 0) {
 								$('#screencapture').append(
 									'<div class="no-video-container">' +
-										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 										'<span class="no-video-text">No remote video available</span>' +
 									'</div>');
 							}
@@ -557,7 +557,7 @@ function newRemoteFeed(id, display) {
 						if($('#screencapture .no-video-container').length === 0) {
 							$('#screencapture').append(
 								'<div class="no-video-container">' +
-									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 									'<span class="no-video-text">No remote video available</span>' +
 								'</div>');
 						}
diff --git a/html/siptest.html b/html/siptest.html
index 8a1eb05747..d7eb1090b1 100644
--- a/html/siptest.html
+++ b/html/siptest.html
@@ -28,7 +28,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -71,26 +71,26 @@ <h3>Demo details</h3>
 				<div class="row">
 					<div class="col-md-6 container invisible" id="login">
 						<div class="input-group mt-1 mb-1">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-up"></i></span>
 							<input class="form-control" type="text" placeholder="SIP Registrar (e.g., sip:host:port)" autocomplete="off" id="server" onkeypress="return checkEnter(this, event);" />
 						</div>
 						<div class="input-group mt-1 mb-1">
-							<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
 							<input class="form-control" type="text" placeholder="SIP Identity (e.g., sip:goofy@example.com)" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);" />
 							<button id="addhelper" class="btn btn-xs btn-info hide" title="Add a new line">
-								<i class="fa fa-plus"></i>
+								<i class="fa-solid fa-plus"></i>
 							</button>
 						</div>
 						<div class="input-group mt-1 mb-1">
-							<span class="input-group-text"><i class="fa fa-user-plus fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-user-plus"></i></span>
 							<input class="form-control" type="text" placeholder="Username (e.g., goofy, overrides the one in the SIP identity if provided)" autocomplete="off" id="authuser" onkeypress="return checkEnter(this, event);" />
 						</div>
 						<div class="input-group mt-1 mb-1">
-							<span class="input-group-text"><i class="fa fa-key fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-key"></i></span>
 							<input class="form-control" type="password" placeholder="Secret (e.g., mysupersecretpassword)" autocomplete="off" id="password" onkeypress="return checkEnter(this, event);" />
 						</div>
 						<div class="input-group mt-1 mb-1">
-							<span class="input-group-text"><i class="fa fa-quote-right fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-quote-right"></i></span>
 							<input class="form-control" type="text" placeholder="Display name (e.g., Alice Smith)" autocomplete="off" id="displayname" onkeypress="return checkEnter(this, event);" />
 						</div>
 						<div class="btn-group btn-group-sm w-100">
@@ -109,7 +109,7 @@ <h3>Demo details</h3>
 					</div>
 					<div class="col-md-6 container invisible" id="phone">
 						<div class="input-group mt-1 mb-1">
-							<span class="input-group-text"><i class="fa fa-phone fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-phone"></i></span>
 							<input class="form-control" type="text" placeholder="SIP URI to call (e.g., sip:1000@example.com)" autocomplete="off" id="peer" onkeypress="return checkEnter(this, event);" />
 						</div>
 						<button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button> <input autocomplete="off" id="dovideo" type="checkbox" />Use Video
diff --git a/html/siptest.js b/html/siptest.js
index 58b9652d0c..5af733a33f 100644
--- a/html/siptest.js
+++ b/html/siptest.js
@@ -468,7 +468,7 @@ $(document).ready(function() {
 												if($('#videoleft .no-video-container').length === 0) {
 													$('#videoleft').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -493,7 +493,7 @@ $(document).ready(function() {
 											if($('#videoleft .no-video-container').length === 0) {
 												$('#videoleft').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -532,7 +532,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -547,9 +547,9 @@ $(document).ready(function() {
 										$('#videoright').parent().find('span').html(
 											'Send DTMF: <span id="dtmf" class="btn-group btn-group-xs"></span>' +
 											'<span id="ctrls" class="top-right btn-group btn-group-xs">' +
-												'<button id="msg" title="Send message" class="btn btn-info"><i class="fa fa-envelope"></i></button>' +
-												'<button id="info" title="Send INFO" class="btn btn-info"><i class="fa fa-info"></i></button>' +
-												'<button id="transfer" title="Transfer call" class="btn btn-info"><i class="fa fa-mail-forward"></i></button>' +
+												'<button id="msg" title="Send message" class="btn btn-info"><i class="fa-solid fa-envelope"></i></button>' +
+												'<button id="info" title="Send INFO" class="btn btn-info"><i class="fa-solid fa-info"></i></button>' +
+												'<button id="transfer" title="Transfer call" class="btn btn-info"><i class="fa-solid fa-share"></i></button>' +
 											'</span>');
 										for(let i=0; i<12; i++) {
 											if(i<10)
@@ -656,7 +656,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No remote video available</span>' +
 													'</div>');
 											}
@@ -1014,12 +1014,12 @@ function addHelper(helperCreated) {
 		'	<div class="row">' +
 		'		<div class="col-md-6 container">' +
 		'			<span class="badge bg-info">Helper #' + helperId +
-		'				<i class="fa fa-window-close" id="rmhelper' + helperId + '" style="cursor: pointer;" title="Remove this helper"></i>' +
+		'				<i class="fa-solid fa-rectangle-xmark" id="rmhelper' + helperId + '" style="cursor: pointer;" title="Remove this helper"></i>' +
 		'			</span>' +
 		'		</div>' +
 		'		<div class="col-md-6 container" id="phone' + helperId + '">' +
 		'			<div class="input-group mt-1 mb-1">' +
-		'				<span class="input-group-text"><i class="fa fa-phone fa-fw"></i></span>' +
+		'				<span class="input-group-text"><i class="fa-solid fa-phone"></i></span>' +
 		'				<input disabled class="form-control" type="text" placeholder="SIP URI to call (e.g., sip:1000@example.com)" autocomplete="off" id="peer' + helperId + '" onkeypress="return checkEnter(this, event, ' + helperId + ');"></input>' +
 		'			</div>' +
 		'			<button disabled class="btn btn-success margin-bottom-sm" autocomplete="off" id="call' + helperId + '">Call</button> <input autocomplete="off" id="dovideo' + helperId + '" type="checkbox">Use Video</input>' +
@@ -1435,7 +1435,7 @@ function addHelper(helperCreated) {
 							if($('#videoleft' + helperId + ' .no-video-container').length === 0) {
 								$('#videoleft' + helperId).append(
 									'<div class="no-video-container">' +
-										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 										'<span class="no-video-text">No webcam available</span>' +
 									'</div>');
 							}
@@ -1460,7 +1460,7 @@ function addHelper(helperCreated) {
 						if($('#videoleft' + helperId + ' .no-video-container').length === 0) {
 							$('#videoleft' + helperId).append(
 								'<div class="no-video-container">' +
-									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 									'<span class="no-video-text">No webcam available</span>' +
 								'</div>');
 						}
@@ -1499,7 +1499,7 @@ function addHelper(helperCreated) {
 							if($('#videoright' + helperId + ' .no-video-container').length === 0) {
 								$('#videoright').append(
 									'<div class="no-video-container">' +
-										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 										'<span class="no-video-text">No remote video available</span>' +
 									'</div>');
 							}
@@ -1514,9 +1514,9 @@ function addHelper(helperCreated) {
 					$('#videoright' + helperId).parent().find('span').html(
 						'Send DTMF: <span id="dtmf' + helperId + '" class="btn-group btn-group-xs"></span>' +
 						'<span id="ctrls" class="top-right btn-group btn-group-xs">' +
-							'<button id="msg' + helperId + '" title="Send message" class="btn btn-info"><i class="fa fa-envelope"></i></button>' +
-							'<button id="info' + helperId + '" title="Send INFO" class="btn btn-info"><i class="fa fa-info"></i></button>' +
-							'<button id="transfer' + helperId + '" title="Transfer call" class="btn btn-info"><i class="fa fa-mail-forward"></i></button>' +
+							'<button id="msg' + helperId + '" title="Send message" class="btn btn-info"><i class="fa-solid fa-envelope"></i></button>' +
+							'<button id="info' + helperId + '" title="Send INFO" class="btn btn-info"><i class="fa-solid fa-info"></i></button>' +
+							'<button id="transfer' + helperId + '" title="Transfer call" class="btn btn-info"><i class="fa-solid fa-share"></i></button>' +
 						'</span>');
 					for(let i=0; i<12; i++) {
 						if(i<10)
@@ -1630,7 +1630,7 @@ function addHelper(helperCreated) {
 						if($('#videoright' + helperId + ' .no-video-container').length === 0) {
 							$('#videoright' + helperId).append(
 								'<div class="no-video-container">' +
-									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 									'<span class="no-video-text">No remote video available</span>' +
 								'</div>');
 						}
diff --git a/html/streamingtest.html b/html/streamingtest.html
index aeeff2eced..748ec314e8 100644
--- a/html/streamingtest.html
+++ b/html/streamingtest.html
@@ -26,7 +26,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -72,7 +72,7 @@ <h3>Demo details</h3>
 					<div class="col-md-6">
 						<div class="card w-100">
 							<div class="card-header">
-								<span class="card-title">Streams <i id="update-streams" class="fa fa-refresh" title="Update list of streams" style="cursor: pointer;"></i></span>
+								<span class="card-title">Streams <i id="update-streams" class="fa-solid fa-rotate" title="Update list of streams" style="cursor: pointer;"></i></span>
 							</div>
 							<div class="card-body" id="list">
 								<div class="btn-group btn-group-sm">
@@ -89,7 +89,7 @@ <h3>Demo details</h3>
 						</div>
 						<div class="card mt-4 w-100 hide" id="info">
 							<div class="card-header">
-								<span class="card-title"><i class="fa fa-info-circle"></i> Metadata</span>
+								<span class="card-title"><i class="fa-solid fa-circle-info"></i> Metadata</span>
 							</div>
 							<div class="card-body">
 								<pre id="metadata" class="card card-body bg-gray mt-3"></pre>
diff --git a/html/streamingtest.js b/html/streamingtest.js
index c8379a6b4e..20b387e9a9 100644
--- a/html/streamingtest.js
+++ b/html/streamingtest.js
@@ -173,7 +173,7 @@ $(document).ready(function() {
 												if($('#'+mstreamId+' .no-video-container').length === 0) {
 													$('#'+mstreamId).append(
 														'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No remote video available</span>' +
 													'</div>');
 												}
@@ -198,7 +198,7 @@ $(document).ready(function() {
 											if($('#'+mstreamId+' .no-video-container').length === 0) {
 												$('#'+mstreamId).append(
 													'<div class="no-video-container audioonly">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/textroomtest.html b/html/textroomtest.html
index 1fad5b3687..bf48989c7e 100644
--- a/html/textroomtest.html
+++ b/html/textroomtest.html
@@ -26,7 +26,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 </head>
 <body>
 
@@ -73,7 +73,7 @@ <h3>Demo details</h3>
 					<span class="badge bg-info" id="you"></span>
 					<div class="col-md-12" id="controls">
 						<div class="input-group mt-3 mb-1 hide" id="registernow">
-							<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
 							<input class="form-control" type="text" placeholder="Choose a display name" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);" />
 							<span class="input-group-btn">
 								<button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
@@ -104,7 +104,7 @@ <h3>Demo details</h3>
 							</div>
 							<div class="card-footer">
 								<div class="input-group mt-3 mb-3">
-									<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+									<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-up"></i></span>
 									<input class="form-control" type="text" placeholder="Write a chatroom message" autocomplete="off" id="datasend" onkeypress="return checkEnter(this, event);" disabled />
 								</div>
 							</div>
diff --git a/html/videocalltest.html b/html/videocalltest.html
index a48238e7fa..0fc2165af0 100644
--- a/html/videocalltest.html
+++ b/html/videocalltest.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -86,14 +86,14 @@ <h3>Demo details</h3>
 				<div class="row mt-4">
 					<div class="col-md-6 container invisible" id="login">
 						<div class="input-group mt-3 mb-1">
-							<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
 							<input class="form-control" type="text" placeholder="Choose a username" autocomplete="off" id="username" onkeypress="return checkEnter(this, event);" />
 						</div>
 						<button class="btn btn-success margin-bottom-sm" autocomplete="off" id="register">Register</button> <span class="hide badge bg-info" id="youok"></span>
 					</div>
 					<div class="col-md-6 container invisible" id="phone">
 						<div class="input-group mt-3 mb-1">
-							<span class="input-group-text"><i class="fa fa-phone fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-phone"></i></span>
 							<input class="form-control" type="text" placeholder="Who should we call?" autocomplete="off" id="peer" onkeypress="return checkEnter(this, event);" />
 						</div>
 						<button class="btn btn-success margin-bottom-sm" autocomplete="off" id="call">Call</button>
@@ -127,7 +127,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoleft"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-up"></i></span>
 							<input type="text" class="form-control" placeholder="Write a DataChannel message" autocomplete="off" id="datasend" onkeypress="return checkEnter(this, event);" disabled>
 						</div>
 					</div>
@@ -143,7 +143,7 @@ <h3>Demo details</h3>
 							<div class="card-body" id="videoright"></div>
 						</div>
 						<div class="input-group mt-3 mb-3">
-							<span class="input-group-text"><i class="fa fa-cloud-upload fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-cloud-arrow-down"></i></span>
 							<input type="text" class="form-control" id="datarecv" disabled>
 						</div>
 					</div>
diff --git a/html/videocalltest.js b/html/videocalltest.js
index 4b46cf1ffe..5abc3e8db4 100644
--- a/html/videocalltest.js
+++ b/html/videocalltest.js
@@ -308,7 +308,7 @@ $(document).ready(function() {
 												if($('#videoleft .no-video-container').length === 0) {
 													$('#videoleft').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -333,7 +333,7 @@ $(document).ready(function() {
 											if($('#videoleft .no-video-container').length === 0) {
 												$('#videoleft').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -376,7 +376,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -405,7 +405,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/videoroomtest.html b/html/videoroomtest.html
index 733c2c55ab..7c91de59f5 100644
--- a/html/videoroomtest.html
+++ b/html/videoroomtest.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
@@ -89,7 +89,7 @@ <h3>Demo details</h3>
 					<span class="badge bg-info" id="you"></span>
 					<div class="col-md-12" id="controls">
 						<div class="input-group mt-3 mb-1 hide" id="registernow">
-							<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
+							<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
 							<input autocomplete="off" class="form-control" type="text" placeholder="Choose a display name" id="username" onkeypress="return checkEnter(this, event);" />
 							<span class="input-group-btn">
 								<button class="btn btn-success" autocomplete="off" id="register">Join the room</button>
diff --git a/html/videoroomtest.js b/html/videoroomtest.js
index 0ca910de61..417db4721e 100644
--- a/html/videoroomtest.js
+++ b/html/videoroomtest.js
@@ -276,7 +276,7 @@ $(document).ready(function() {
 											$('#myvideo').addClass('hide');
 											$('#videolocal').append(
 												'<div class="no-video-container">' +
-													'<i class="fa fa-video-camera fa-5 no-video-icon" style="height: 100%;"></i>' +
+													'<i class="fa-solid fa-video fa-xl no-video-icon" style="height: 100%;"></i>' +
 													'<span class="no-video-text" style="font-size: 16px;">Video rejected, no webcam</span>' +
 												'</div>');
 										}
@@ -307,7 +307,7 @@ $(document).ready(function() {
 												if($('#videolocal .no-video-container').length === 0) {
 													$('#videolocal').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -338,7 +338,7 @@ $(document).ready(function() {
 											if($('#videolocal .no-video-container').length === 0) {
 												$('#videolocal').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -692,7 +692,7 @@ function newRemoteFeed(id, display, streams) {
 							if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
 								$('#videoremote'+remoteFeed.rfindex).append(
 									'<div class="no-video-container">' +
-										'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+										'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 										'<span class="no-video-text">No remote video available</span>' +
 									'</div>');
 							}
@@ -720,7 +720,7 @@ function newRemoteFeed(id, display, streams) {
 						if($('#videoremote'+remoteFeed.rfindex + ' .no-video-container').length === 0) {
 							$('#videoremote'+remoteFeed.rfindex).append(
 								'<div class="no-video-container">' +
-									'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+									'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 									'<span class="no-video-text">No remote video available</span>' +
 								'</div>');
 						}
diff --git a/html/virtualbg.html b/html/virtualbg.html
index 806b994ee0..b9c3ef363c 100644
--- a/html/virtualbg.html
+++ b/html/virtualbg.html
@@ -28,7 +28,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>
diff --git a/html/virtualbg.js b/html/virtualbg.js
index 6d439f2423..31b426ce9b 100644
--- a/html/virtualbg.js
+++ b/html/virtualbg.js
@@ -183,7 +183,7 @@ $(document).ready(function() {
 												if($('#videoleft .no-video-container').length === 0) {
 													$('#videoleft').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No webcam available</span>' +
 														'</div>');
 												}
@@ -208,7 +208,7 @@ $(document).ready(function() {
 											if($('#videoleft .no-video-container').length === 0) {
 												$('#videoleft').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
@@ -251,7 +251,7 @@ $(document).ready(function() {
 												if($('#videoright .no-video-container').length === 0) {
 													$('#videoright').append(
 														'<div class="no-video-container">' +
-															'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+															'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 															'<span class="no-video-text">No remote video available</span>' +
 														'</div>');
 												}
@@ -279,7 +279,7 @@ $(document).ready(function() {
 											if($('#videoright .no-video-container').length === 0) {
 												$('#videoright').append(
 													'<div class="no-video-container">' +
-														'<i class="fa fa-video-camera fa-5 no-video-icon"></i>' +
+														'<i class="fa-solid fa-video fa-xl no-video-icon"></i>' +
 														'<span class="no-video-text">No webcam available</span>' +
 													'</div>');
 											}
diff --git a/html/webaudio.html b/html/webaudio.html
index c6e29d3a44..dd3ae9266c 100644
--- a/html/webaudio.html
+++ b/html/webaudio.html
@@ -27,7 +27,7 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.2/cerulean/bootstrap.min.css" type="text/css"/>
 <link rel="stylesheet" href="css/demo.css" type="text/css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" type="text/css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"/>
 </head>
 <body>