#32 Replace of all icons with free SVG Font Awesome

Eoxia · Mar 3, 2023 · 150fa4f · 150fa4f
1 parent 3e64f9e
commit 150fa4f
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 15 deletions.
diff --git a/assets/css/style-sensei.css b/assets/css/style-sensei.css
@@ -173,13 +173,16 @@ body.learner-profile .post.course .meter .value {
   padding-top: 2em;
   padding-right: 4em;
 }
+.profile-sidebar .profile-sidebar-content svg {
+  max-width: 12px;
+}
 .profile-sidebar .profile-nav {
   display: block;
   color: #000;
   font-size: 14px;
   margin-bottom: 1.5em;
 }
-.profile-sidebar .profile-nav i {
+.profile-sidebar .profile-nav svg {
   margin-right: 0.4em;
 }
 .profile-sidebar .profile-nav.spacer {
@@ -191,6 +194,9 @@ body.learner-profile .post.course .meter .value {
   padding: 0.6em 1em;
   border-radius: 6px;
 }
+.profile-sidebar .profile-nav-active svg, body.sensei.learner-archive-message .profile-sidebar .nav-messages svg, body.sensei.learner-profile .profile-sidebar .nav-courses svg {
+  fill: #fff;
+}
 
 body.learner-archive-message .archive-header {
   display: none;
@@ -228,11 +234,16 @@ body.learner-archive-message .message-container a .message-title {
 }
 body.learner-archive-message .message-container a .message-data-container {
   margin-left: auto;
+  min-width: 200px;
+  text-align: right;
 }
 body.learner-archive-message .message-container a .message-data-container .message-data {
   opacity: 0.6;
   margin-left: 0.5em;
 }
+body.learner-archive-message .message-container a .message-data-container .message-data svg {
+  max-width: 12px;
+}
 
 body.single-sensei_message .wp-block-post-title {
   display: none;
@@ -251,6 +262,9 @@ body.single-sensei_message .message-header a {
   transition: opacity 0.2s ease-out;
   margin-right: 0.5em;
 }
+body.single-sensei_message .message-header a svg {
+  width: 20px;
+}
 body.single-sensei_message .message-header a:hover {
   opacity: 0.7;
 }
@@ -318,8 +332,9 @@ body.single-sensei_message .message-comment .comment-container .comment-meta .me
   margin-left: 0.5em;
   font-size: 14px;
 }
-body.single-sensei_message .message-comment .comment-container .comment-meta i {
+body.single-sensei_message .message-comment .comment-container .comment-meta svg {
   margin-right: 0.3em;
+  max-width: 14px;
 }
 body.single-sensei_message .message-comment.message-author .avatar {
   -webkit-box-ordinal-group: 3;
@@ -334,6 +349,9 @@ body.single-sensei_message .message-comment.message-author .comment-container {
   background: var(--wp--preset--color--primary);
   color: #fff;
 }
+body.single-sensei_message .message-comment.message-author .comment-container svg {
+  fill: #fff;
+}
 
 #my-courses .col2-set {
   display: grid;

diff --git a/assets/css/style-sensei.min.css b/assets/css/style-sensei.min.css
diff --git a/assets/scss/sensei/template/_message.scss b/assets/scss/sensei/template/_message.scss
@@ -34,10 +34,16 @@ body.learner-archive-message {
     }
     .message-data-container {
       margin-left: auto;
+      min-width: 200px;
+      text-align: right;
 
       .message-data {
         opacity: 0.6;
         margin-left: 0.5em;
+
+        svg {
+          max-width: 12px;
+        }
       }
     }
   }
@@ -58,6 +64,9 @@ body.single-sensei_message {
       transition: opacity 0.2s ease-out;
       margin-right: 0.5em;
 
+      svg {
+        width: 20px;
+      }
       &:hover {
         opacity: 0.7;
       }
@@ -126,8 +135,9 @@ body.single-sensei_message {
           margin-left: 0.5em;
           font-size: 14px;
         }
-        i {
+        svg {
           margin-right: 0.3em;
+          max-width: 14px;
         }
       }
     }
@@ -142,6 +152,10 @@ body.single-sensei_message {
         order: 1;
         background: var(--wp--preset--color--primary);
         color: #fff;
+
+        svg {
+          fill: #fff;
+        }
       }
     }
   }

diff --git a/assets/scss/sensei/template/_profile-sidebar.scss b/assets/scss/sensei/template/_profile-sidebar.scss
@@ -3,6 +3,10 @@
     margin-left: 250px;
     padding-top: 2em;
     padding-right: 4em;
+
+    svg {
+      max-width: 12px;
+    }
   }
 
   .profile-nav {
@@ -11,7 +15,7 @@
     font-size: 14px;
     margin-bottom: 1.5em;
 
-    i {
+    svg {
       margin-right: 0.4em;
     }
 
@@ -24,6 +28,10 @@
     color: #fff;
     padding: 0.6em 1em;
     border-radius: 6px;
+
+    svg {
+      fill: #fff;
+    }
   }
 }
 

diff --git a/sensei/functions.php b/sensei/functions.php
@@ -73,15 +73,15 @@ function bfs_profile_sidebar() {
 	if ( is_user_logged_in() ) {
 		$profile_url = Sensei()->learner_profiles->get_permalink(get_current_user_id());
 		if (!empty($profile_url)) {
-			$sidebar .= '<a href="' . esc_url($profile_url) . '" class="profile-nav nav-courses"><i class="fa-solid fa-book"></i> ' . esc_html__('My courses', 'beflex-child') . '</a>';
+			$sidebar .= '<a href="' . esc_url($profile_url) . '" class="profile-nav nav-courses"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg> ' . esc_html__('My courses', 'beflex-child') . '</a>';
 		}
 
 		$message_url = get_post_type_archive_link('sensei_message');
 		if (!empty($message_url)) {
-			$sidebar .= '<a href="' . esc_url($message_url) . '" class="profile-nav nav-messages"><i class="fa-solid fa-envelope"></i> ' . esc_html__('My messages', 'beflex-child') . '</a>';
+			$sidebar .= '<a href="' . esc_url($message_url) . '" class="profile-nav nav-messages"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg> ' . esc_html__('My messages', 'beflex-child') . '</a>';
 		}
 
-		$sidebar .= '<a href="' . esc_url(wp_logout_url(home_url())) . '" class="profile-nav spacer"><i class="fa-solid fa-right-from-bracket"></i> ' . esc_html__('Logout', 'beflex-child') . '</a>';
+		$sidebar .= '<a href="' . esc_url(wp_logout_url(home_url())) . '" class="profile-nav spacer"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/></svg> ' . esc_html__('Logout', 'beflex-child') . '</a>';
 	}
 
 	$sidebar .= '</div></div>';
@@ -127,8 +127,8 @@ function get_message_last_update( $message_id ) {
 		$date_hour = get_the_modified_date( 'h:i', $message_id );
 	}
 
-	$render = '<span class="message-data message-date"><i class="fa-regular fa-calendar"></i> ' . $date_day . '</span>';
-	$render .= '<span class="message-data message-hour"><i class="fa-regular fa-clock"></i> ' . $date_hour . '</span>';
+	$render = '<span class="message-data message-date"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg> ' . $date_day . '</span>';
+	$render .= '<span class="message-data message-hour"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg> ' . $date_hour . '</span>';
 	return $render;
 }
 

diff --git a/sensei/single-message.php b/sensei/single-message.php
@@ -32,7 +32,9 @@
 				$message_url = get_post_type_archive_link( 'sensei_message' );
 				?>
 				<div class="message-header">
-					<a href="<?php echo esc_url( $message_url ); ?>"><i class="fa-regular fa-circle-left"></i></a>
+					<a href="<?php echo esc_url( $message_url ); ?>">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M48 256a208 208 0 1 1 416 0A208 208 0 1 1 48 256zm464 0A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM217.4 376.9c4.2 4.5 10.1 7.1 16.3 7.1c12.3 0 22.3-10 22.3-22.3V304h96c17.7 0 32-14.3 32-32V240c0-17.7-14.3-32-32-32H256V150.3c0-12.3-10-22.3-22.3-22.3c-6.2 0-12.1 2.6-16.3 7.1L117.5 242.2c-3.5 3.8-5.5 8.7-5.5 13.8s2 10.1 5.5 13.8l99.9 107.1z"/></svg>
+					</a>
 					<h1 class="message-title">
 						<?php printf(
 							esc_html__( 'Conversation du cours : %s', 'beflex-child' ),
@@ -97,8 +99,12 @@
 									$comment_date_hour = get_comment_date( 'h:i', $comment->comment_ID );
 									?>
 									<div class="comment-meta">
-										<span class="message-data message-date"><i class="fa-regular fa-calendar"></i><?php echo esc_html( $comment_date_day ); ?></span>
-										<span class="message-data message-hour"><i class="fa-regular fa-clock"></i><?php echo esc_html( $comment_date_hour ); ?></span>
+										<span class="message-data message-date">
+											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>
+											<?php echo esc_html( $comment_date_day ); ?></span>
+										<span class="message-data message-hour">
+											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>
+											<?php echo esc_html( $comment_date_hour ); ?></span>
 									</div>
 								</div>
 							</div>
@@ -116,8 +122,12 @@
 							$comment_date_hour = get_the_modified_date( 'h:i', get_the_ID() );
 							?>
 							<div class="comment-meta">
-								<span class="message-data message-date"><i class="fa-regular fa-calendar"></i><?php echo esc_html( $comment_date_day ); ?></span>
-								<span class="message-data message-hour"><i class="fa-regular fa-clock"></i><?php echo esc_html( $comment_date_hour ); ?></span>
+								<span class="message-data message-date">
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>
+									<?php echo esc_html( $comment_date_day ); ?></span>
+								<span class="message-data message-hour">
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.3.0 by @fontawesome - https://fontawesome.com License Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>
+									<?php echo esc_html( $comment_date_hour ); ?></span>
 							</div>
 						</div>
 					</div>