Replace font awesome font with svg

src/styles/_lightbox.scss

@@ -1,13 +1,26 @@
 @use "common";
-@use "fa/variables";
-@use "fa";
 @use "color";
 
 @mixin lightbox-icon($icon) {
 	background: none;
 	font-size: 2em;
-	@extend .fa;
-	@extend .#{variables.$fa-css-prefix}-#{$icon};
+	display: inline-block;
+	line-height: 1;
+
+	&:before {
+		@if $icon == prev {
+			content: "‹";
+		}
+		@else if $icon == next {
+			content: "›";
+		}
+		@else if $icon == close {
+			content: "×";
+		}
+		@else if $icon == cancel {
+			content: "□";
+		}
+	}
 }
 
 body.lb-disable-scrolling {
@@ -89,9 +102,9 @@ body.lb-disable-scrolling {
 					line-height: 1.33333333em;
 
 					&.comment {
-						.fa {
-							vertical-align: center;
-						}
+						.spot-icon {
+							vertical-align: center;
+						}
 						.comment-text {
 							display: inline-block;
 							width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
@@ -263,12 +276,12 @@ body.lb-disable-scrolling {
 
 			.lb-closeContainer .lb-close {
 				@include lightbox-icon(close);
-				@extend .fa-lg;
-				@extend .fa-fw;
 				@extend .clickable;
 				height: auto;
 				font-size: 1.3333333333em;
 				line-height: 1em;
+				text-align: center;
+				width: 1.25em;
 
 				&:hover {
 					color: color.$default-inv-hover;
@@ -276,4 +289,4 @@ body.lb-disable-scrolling {
 			}
 		}
 	}
-}
+}