Merge pull request #166 from MITLibraries/pw-113

Replace old custom versions of FontAwesome with new FontAwesome 6 via our own CDN
MITLibraries · Dec 9, 2024 · 3442bf2 · 3442bf2
2 parents e63e481 + cb924a2
commit 3442bf2
Show file tree

Hide file tree

Showing 126 changed files with 82 additions and 17,727 deletions.
diff --git a/web/app/themes/mitlib-child/css/scss/interviewees.scss b/web/app/themes/mitlib-child/css/scss/interviewees.scss
@@ -45,9 +45,10 @@
 
 					&:before {
 						content: " ";
-						font-family: FontAwesome;
+						font-family: 'Font Awesome 6 Free';
 						color: #338bc5;
 						font-size: 12px;
+						font-weight: 600;
 						margin-left: -12px;
 					}
 				}

diff --git a/web/app/themes/mitlib-child/css/scss/interviews.scss b/web/app/themes/mitlib-child/css/scss/interviews.scss
@@ -7,6 +7,7 @@
 
 	.row-icon {
 		margin: 9px 9px 6px 9px;
+		padding-top: 4px;
 	}
 
 	.list-inline {
@@ -17,6 +18,8 @@
 			margin-right: 12px;
 		}
 
+		&.links i {margin-right: 4px;}
+
 		&.tags li,
 		&.categories li {
 			padding-left: 0;

diff --git a/web/app/themes/mitlib-child/functions.php b/web/app/themes/mitlib-child/functions.php
@@ -28,7 +28,6 @@ function child_scripts_styles() {
 
 	// First we register stylesheet libraries.
 	wp_register_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css', array(), '3.0.0' );
-	wp_register_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css', array(), '4.6.0' );
 	wp_register_style( 'interviews', get_stylesheet_directory_uri() . '/css/build/interviews.css', array(), $theme_version );
 	wp_register_style( 'interviewees', get_stylesheet_directory_uri() . '/css/build/interviewees.css', array(), $theme_version );
 	wp_register_style( 'child-style', get_stylesheet_uri(), array( 'parent-global', 'dashicons' ), $theme_version );
@@ -43,7 +42,6 @@ function child_scripts_styles() {
 
 	// Finally we enqueue those libraries - the child theme just always enqueues everything.
 	wp_enqueue_style( 'bootstrap' );
-	wp_enqueue_style( 'font-awesome' );
 	wp_enqueue_style( 'child-style' );
 	wp_enqueue_script( 'jquery' );
 	wp_enqueue_script( 'bootstrap-js' );

diff --git a/web/app/themes/mitlib-child/inc/location.php b/web/app/themes/mitlib-child/inc/location.php
@@ -23,5 +23,5 @@
 	<?php if ( $docs_email ) : ?>
 	<a href="mailto:<?php echo esc_attr( $docs_email ); ?>" class="email"><?php echo esc_html( $docs_email ); ?></a> |
 	<?php endif; ?>
-	<a href="<?php echo esc_attr( $map_page ); ?>">Room: <?php echo esc_html( $docs_building ); ?> <i class="icon-arrow-right"></i></a>
+	<a href="<?php echo esc_attr( $map_page ); ?>">Room: <?php echo esc_html( $docs_building ); ?> <i class="fa-solid fa-arrow-right"></i></a>
 </div>
diff --git a/web/app/themes/mitlib-child/single-interview.php b/web/app/themes/mitlib-child/single-interview.php
@@ -100,7 +100,7 @@
 					</div>
 					<div class="flex-item">
 						<div class="flex-container">
-							<i class="icon-folder-close flex-item row-icon"></i>
+						<i class="fa fa-folder flex-item row-icon"></i></i>
 							<ul class="list-inline categories flex-item">
 								<?php
 								foreach ( $categories as $category ) {
@@ -110,7 +110,7 @@
 							</ul>
 						</div>
 						<div class="flex-container">
-							<i class="icon-tag flex-item row-icon"></i>
+							<i class="fa fa-tag flex-item row-icon"></i>
 							<ul class="list-inline tags flex-item">
 								<?php
 								foreach ( $tags as $tag ) {
@@ -122,16 +122,16 @@
 						<ul class="list-inline links">
 							<?php
 							if ( $audio ) {
-								echo '<li><i class="icon-download"></i> <a href="' . esc_url( $audio ) . '">Download (MP3)</a></li>';
+								echo '<li><i class="fa-regular fa-circle-down"></i> <a href="' . esc_url( $audio ) . '">Download (MP3)</a></li>';
 							}
 							if ( $transcript ) {
-								echo '<li><i class="icon-file"></i> <a href="' . esc_url( $transcript ) . '">Transcript (PDF)</a></li>';
+								echo '<li><i class="fa-regular fa-file-lines"></i> <a href="' . esc_url( $transcript ) . '">Transcript (PDF)</a></li>';
 							}
 							if ( $cd ) {
 								echo '<li><span class="dashicons dashicons-album"></span> <a href="' . esc_url( $cd ) . '">CD available in the library</a></li>';
 							}
 							if ( $print ) {
-								echo '<li><i class="icon-book"></i> <a href="' . esc_url( $print ) . '">Print transcript available in the library</a></li>';
+								echo '<li><i class="fa fa-book"></i> <a href="' . esc_url( $print ) . '">Print transcript available in the library</a></li>';
 							}
 							?>
 						</ul>

diff --git a/web/app/themes/mitlib-child/style.css b/web/app/themes/mitlib-child/style.css
@@ -120,7 +120,7 @@ b, strong {
 .childTheme .todayHours a:after,.childTheme .locationInfo a:after {
 	content:'\f061';
 	display:inline-block;
-	font-family:'fontawesome-MITLibraries';
+	font-family:'Font Awesome 6 Free';
 	margin-left:.5em;
 }
 
@@ -997,7 +997,7 @@ a.px14 {
 
 .upw-content .custom-field-event_date:before {
 	margin-right: 5px;
-	font-family:FontAwesome;
+	font-family:'Font Awesome 6 Free';
 	content:"\f073" !important;
 	color: #F58733;
 	font-size: 1em;
@@ -1145,7 +1145,7 @@ a.px14 {
 .exhibits-button:after {
 	content:'\f061';
 	display:inline-block;
-	font-family:'fontawesome';
+	font-family:'Font Awesome 6 Free';
 	margin-left:.5em;
 }
 
@@ -1189,7 +1189,7 @@ a.px14 {
 
 .button.button-music:before {
 	content: "\f028";
-	font-family: FontAwesome;
+	font-family: 'Font Awesome 6 Free';
 	font-weight: normal;
 	font-size: inherit;
 	margin-right: 10px;

diff --git a/web/app/themes/mitlib-news/functions.php b/web/app/themes/mitlib-news/functions.php
@@ -26,7 +26,6 @@ function news_scripts_styles() {
 	$parent_version = wp_get_theme()->parent()->get( 'Version' );
 
 	// Register stylesheets.
-	wp_register_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css', array(), '4.6.0' );
 	wp_register_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), $parent_version );
 	wp_register_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), $theme_version );
 	wp_register_style( 'newsmobile', get_stylesheet_directory_uri() . '/css/newsmobile.css', array(), $theme_version );
@@ -37,7 +36,6 @@ function news_scripts_styles() {
 	wp_register_script( 'myScripts', get_stylesheet_directory_uri() . '/js/myScripts.js', array( 'lazyload' ), $theme_version, false );
 
 	// Enqueue libraries - these files are always loaded.
-	wp_enqueue_style( 'font-awesome' );
 	wp_enqueue_style( 'parent-style' );
 	wp_enqueue_style( 'bootstrap' );
 	wp_enqueue_style( 'newsmobile' );

diff --git a/web/app/themes/mitlib-parent/css/scss/_main.scss b/web/app/themes/mitlib-parent/css/scss/_main.scss
@@ -191,11 +191,12 @@ ul.arrows li:before,
 .single-location .tab ul.arrows li:before,
 .page-template-page-location-php .tab ul.arrows li:before
 {
-	font-family:FontAwesome;
+	font-family:'Font Awesome 6 Free';
 	content:"\f061";
 	color: #338bc5;
 	font-size: .75em;
 	margin-right: 7px;
+	font-weight: 600;
 }
 
 .locationContent ul li {

diff --git a/web/app/themes/mitlib-parent/css/scss/global.scss b/web/app/themes/mitlib-parent/css/scss/global.scss
@@ -1,7 +1,9 @@
 @import "modules/all";
 @import "main";
 @import "responsive";
-@import "../../libs/fontawesome/css/font-awesome";
-@import "../../libs/fontawesome-MITLibraries/style";
+@import "https://cdn.libraries.mit.edu/files/fontawesome/6.7.1/css/fontawesome.css";
+@import "https://cdn.libraries.mit.edu/files/fontawesome/6.7.1/css/solid.css";
+@import "https://cdn.libraries.mit.edu/files/fontawesome/6.7.1/css/regular.css";
+@import "https://cdn.libraries.mit.edu/files/fontawesome/6.7.1/css/brands.css";
 @import "partials/base";
 @import "libs/base";
diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_accordion.scss b/web/app/themes/mitlib-parent/css/scss/partials/_accordion.scss
@@ -19,7 +19,7 @@
 				flex-direction: column;
 			}
 			&:before {
-				font-family:FontAwesome;
+				font-family:'Font Awesome 6 Free';
 				content:"\f0da";
 				margin-right: 1em;
 				color: #338bc5;

diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss
@@ -51,10 +51,10 @@
 	opacity: 0;
 }
 
-.posts--preview--alerts .icon-exclamation-sign,
-.location--alerts .icon-exclamation-sign {
+.posts--preview--alerts .fa-circle-exclamation,
+.location--alerts .fa-circle-exclamation {
 	color: $black;
-	font-size: 3.5em;
+	font-size: 2.75em;
 	margin: 0 .5em 0 .25em;
 	position: relative;
 	@include bp-mobile--only {
@@ -109,14 +109,17 @@
 
 		&:before{
 			color: $info-icon-color;
-			content: "\f05a";
+			content: "\f129";
 
-			font-family: FontAwesome;
-			font-weight: normal;
-			font-size: 24px;
+			font-family: 'Font Awesome 6 Free';
+			font-weight: 600;
+			font-size: 22px;
 			font-style: normal;
 			display: inline-block;
+			padding-top: 1px;
+			text-align: center;
 			text-decoration: inherit;
+			width: 20px;
 		}
 	}
 
@@ -150,7 +153,7 @@
 
 		i:before {
 			color: $warning-icon-color;
-			content: "\f06a";
+			content: "\f071";
 		}
 	}
 
@@ -168,7 +171,7 @@
 
 		i:before {
 			color: $success-icon-color;
-			content: "\f046";
+			content: "\f00c";
 		}
 	}
 }
diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_locations.scss b/web/app/themes/mitlib-parent/css/scss/partials/_locations.scss
@@ -62,6 +62,10 @@
 	.content ul+h3 {
 		margin-top: 15px;
 	}
+
+	.libraryAlertTop {
+		margin-top: 24px;
+	}
 }
 
 .locationPage {

diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_sidebar.scss b/web/app/themes/mitlib-parent/css/scss/partials/_sidebar.scss
@@ -22,7 +22,8 @@
 			position:absolute;
 			top: 4px;
 			left: -15px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Free';
+			font-weight: 600;
 			content:"\f138";
 			color: #338bc5;
 			font-size: 11px;
@@ -40,7 +41,7 @@
 			position:absolute;
 			top: 1px;
 			left: -20px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Brands';
 			content:"\f099" !important;
 			color: #338bc5;
 			font-size: 14px;
@@ -49,7 +50,7 @@
 			position:absolute;
 			top: 2px;
 			left: -20px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Brands';
 			content:"\f082" !important;
 			color: #338bc5;
 			font-size: 14px;
@@ -58,7 +59,7 @@
 			position:absolute;
 			top: 3px;
 			left: -20px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Free';
 			content:"\f003" !important;
 			color: #338bc5;
 			font-size: 14px;
@@ -67,7 +68,7 @@
 			position:absolute;
 			top: 3px;
 			left: -20px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Brands';
 			content:"\f16d" !important;
 			color: #338bc5;
 			font-size: 1em;
@@ -76,7 +77,7 @@
 			position:absolute;
 			top: 3px;
 			left: -20px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Brands';
 			content:"\f0d5" !important;
 			color: #338bc5;
 			font-size: 1em;
@@ -85,7 +86,7 @@
 			position:absolute;
 			top: 3px;
 			left: -20px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Brands';
 			content:"\f0d2" !important;
 			color: #338bc5;
 			font-size: 1em;
@@ -94,7 +95,7 @@
 			position:absolute;
 			top: 3px;
 			left: -20px;
-			font-family:FontAwesome;
+			font-family:'Font Awesome 6 Brands';
 			content:"\f16a" !important;
 			color: #338bc5;
 			font-size: 1em;

diff --git a/web/app/themes/mitlib-parent/css/scss/partials/pages/_hours.scss b/web/app/themes/mitlib-parent/css/scss/partials/pages/_hours.scss
@@ -175,13 +175,13 @@
 	position: relative;
 }
 
-.hrList .libraryAlert .icon-exclamation-sign {
+.hrList .libraryAlert i {
 	color: #ffcc33;
 	float: left;
-	font-size: 2em;
+	font-size: 1.6em;
 	position: absolute;
-	top: 0;
-	left: 3.5%;
+	top: 0.4em;
+	left: 0.425em;
 }
 
 .hrList .libraryAlert h3 {

diff --git a/web/app/themes/mitlib-parent/inc/content-location-2021.php b/web/app/themes/mitlib-parent/inc/content-location-2021.php
@@ -88,7 +88,7 @@
 						<?php if ( $email ) : ?>
 					<a href="mailto:<?php echo esc_url( $email ); ?>" class="email"><?php echo esc_html( $email ); ?></a> |
 						<?php endif; ?>
-					<a href="<?php echo esc_url( $mapPage . $slug ); ?>">Room: <?php echo esc_html( $building ); ?> <i class="icon-arrow-right"></i></a>
+					<a href="<?php echo esc_url( $mapPage . $slug ); ?>">Room: <?php echo esc_html( $building ); ?> <i class="fa fa-arrow-right"></i></a>
 				</div>
 			</div><!-- end div.libraryContent -->
 
@@ -98,15 +98,15 @@
 					<?php if ( true === $study24 ) : ?>
 						<a class="study-24-7" href="<?php echo esc_url( $gStudy24Url ); ?>" alt="This location contains one or more study spaces available 24 hours a day, seven days a week. Click the link for more info." title="Study 24/7">Study 24/7</a>
 					<?php endif; ?>
-					<a href="/hours" class="link-hours-all">See all hours <i class="icon-arrow-right"></i></a>
+					<a href="/hours" class="link-hours-all">See all hours <i class="fa fa-arrow-right"></i></a>
 				</div>
 			<?php } else { ?>
 				<div class="hours-today">
 					<span>Today's hours: <strong data-location-hours="<?php the_title(); ?>"></strong></span>
 					<?php if ( true === $study24 ) : ?>
 						| <a class="study-24-7" href="<?php echo esc_url( $gStudy24Url ); ?>" alt="This location contains one or more study spaces available 24 hours a day, seven days a week. Click the link for more info." title="Study 24/7">Study 24/7</a>
 					<?php endif; ?>
-					<a href="/hours" class="link-hours-all">See all hours <i class="icon-arrow-right"></i></a>
+					<a href="/hours" class="link-hours-all">See all hours <i class="fa fa-arrow-right"></i></a>
 				</div><!-- end div.hours-today -->
 			<?php } ?>
 		</div><!-- end div.topLeft -->
@@ -170,8 +170,8 @@
 									<span class="bio"><?php echo esc_html( $bio ); ?></span>
 								</h3>
 								<div class="links">
-									<a class="primary" href="<?php echo esc_url( $url ); ?>" target="_blank">How can I help? <i class="icon-arrow-right"></i></a>
-									<a href="/experts">See all our experts <i class="icon-arrow-right"></i></a>
+									<a class="primary" href="<?php echo esc_url( $url ); ?>" target="_blank">How can I help? <i class="fa fa-arrow-right"></i></a>
+									<a href="/experts">See all our experts <i class="fa fa-arrow-right"></i></a>
 								</div>
 
 							</div>