diff --git a/assets/src/scripts/components/hydrograph/audible.js b/assets/src/scripts/components/hydrograph/audible.js
index 7aed45ee5af49eb96d77b27f8ef8ecf21f55668d..683fb3e96a02cdaade5bb57c4788eec3775fb2cc 100644
--- a/assets/src/scripts/components/hydrograph/audible.js
+++ b/assets/src/scripts/components/hydrograph/audible.js
@@ -129,7 +129,7 @@ export const audibleUI = function (elem) {
.attr('ga-event-category', 'TimeseriesGraph')
.html('Audible ');
button.append('i')
- .classed('fa', true);
+ .classed('fas', true);
button.call(link(function(elem, audibleOn) {
if (audibleOn) {
elem.attr('title', 'Stop')
diff --git a/assets/src/scripts/components/hydrograph/parameters.js b/assets/src/scripts/components/hydrograph/parameters.js
index 720c1aa503f6d69a81c2241de650c7f2224e46aa..cf67c7d775ccc8df5587488dc759980b4ce0d5f8 100644
--- a/assets/src/scripts/components/hydrograph/parameters.js
+++ b/assets/src/scripts/components/hydrograph/parameters.js
@@ -183,7 +183,7 @@ export const plotSeriesSelectTable = function (elem, {siteno, availableTimeserie
.attr('class', 'tooltip-item');
tooltip.append('span')
.append('i')
- .attr('class', 'fa fa-info-circle');
+ .attr('class', 'fas fa-info-circle');
tooltip.append('div')
.attr('class', 'tooltip parameter-tooltip')
diff --git a/assets/src/scripts/components/map/legend.js b/assets/src/scripts/components/map/legend.js
index 93492ef5489a629aaa62676c749f6d6e925a4445..142f8c68fd0dc9dcfb865f177606d77d206e8505 100644
--- a/assets/src/scripts/components/map/legend.js
+++ b/assets/src/scripts/components/map/legend.js
@@ -50,7 +50,7 @@ export const createLegendControl = function(options) {
let buttonLabel = DomUtil.create('span', '', buttonContainer);
buttonLabel.innerHTML = 'Legend';
let expandButton = DomUtil.create('button', 'legend-expand usa-button-secondary', buttonContainer);
- expandButton.innerHTML = '<i class="fa fa-compress"></i>';
+ expandButton.innerHTML = '<i class="fas fa-compress"></i>';
expandButton.title = 'Hide legend';
let legendListContainer = DomUtil.create('div', 'legend-list-container', container);
@@ -61,11 +61,11 @@ export const createLegendControl = function(options) {
// Set up click handler for the expandButton
DomEvent.on(expandButton, 'click', function() {
if (expandButton.title === 'Hide legend') {
- expandButton.innerHTML = '<i class="fa fa-expand"></i>';
+ expandButton.innerHTML = '<i class="fas fa-expand"></i>';
expandButton.title = 'Show legend';
legendListContainer.setAttribute('hidden', true);
} else {
- expandButton.innerHTML = '<i class="fa fa-compress"></i>';
+ expandButton.innerHTML = '<i class="fas fa-compress"></i>';
expandButton.title = 'Hide legend';
legendListContainer.removeAttribute('hidden');
}
@@ -126,4 +126,4 @@ export const createFIMLegend = function(legendControl, isFIMAvailable) {
} else {
select(legendControl.getContainer()).select('#fim-legend-list').remove();
}
-};
\ No newline at end of file
+};
diff --git a/assets/src/styles/main.scss b/assets/src/styles/main.scss
index 1c48102dab3691c2191d29de10f32fd3b3b763d0..b1123e8e87f9ced5583cc49b08ed97a5dcd9d564 100644
--- a/assets/src/styles/main.scss
+++ b/assets/src/styles/main.scss
@@ -4,8 +4,8 @@
$fa-font-path: './fonts' !default;
@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
+@import '../../node_modules/@fortawesome/fontawesome-free/scss/fa-brands.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/fa-solid.scss';
-@import '../../node_modules/font-awesome/scss/font-awesome';
@import './partials/footer';
@import './partials/header';
diff --git a/wdfn-server/waterdata/templates/base.html b/wdfn-server/waterdata/templates/base.html
index 7f4d079b0e4ef18511a8b6e2ec38b086259f111e..f89d07531fc84d47dcb5f332c673046789db3e06 100644
--- a/wdfn-server/waterdata/templates/base.html
+++ b/wdfn-server/waterdata/templates/base.html
@@ -9,7 +9,7 @@
<div id="wdfn-alert-banner">
<input type="checkbox" id="wdfn-alert-dismiss" hidden/>
<div class="wdfn-alert-body content-container">
- <label title="Close" class="close" for="wdfn-alert-dismiss"><i class="fa fa-times"></i></label>
+ <label title="Close" class="close" for="wdfn-alert-dismiss"><i class="fas fa-times"></i></label>
<div>
Beta release. Use <a target="_blank" href="https://water.usgs.gov/contact/gsanswers?pemail=gs-w_water_data_for_the_nation&subject=Water%20Data%20for%20the%20Nation%20Feedback&viewnote=%3CH1%3EUSGS+WDFN+TNG+Feedback%3C/H1%3E">this form</a> to provide feedback.
</div>
diff --git a/wdfn-server/waterdata/templates/macros/components.html b/wdfn-server/waterdata/templates/macros/components.html
index f276cf344a0f13fb993a642d14dcc3af8a7e6d9e..eefaec9ad474c11432785c15782cf5374ade25d0 100644
--- a/wdfn-server/waterdata/templates/macros/components.html
+++ b/wdfn-server/waterdata/templates/macros/components.html
@@ -33,7 +33,7 @@
{% macro EmbedComponent(site_no) -%}
<span class="wdfn-component" data-component="embed">
- <i class="embed-icon has-script fa fa-code"></i>
+ <i class="embed-icon has-script fas fa-code"></i>
<fieldset class="no-script">
<legend>Embed Snippet</legend>
<input type="text" id="embed-url" aria-label="Embed this time-series chart on your own site" value='<iframe src="{{ url_for('time_series_component', site_no=site_no, _external=True) }}" width="600" height="900" frameborder="0" style="border:0" allowfullscreen></iframe>' readonly></input>
@@ -54,7 +54,7 @@
{% macro QuestionTooltip(text_id, content, external_desc) -%}
<div class="tooltip-item">
<sup {% if not external_desc %}aria-describedby="{{ text_id|tooltip_content_id }}"{% endif %}>
- <i class="fa fa-question-circle" aria-hidden="true"></i>
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
</sup>
<div class="tooltip">
<p id="{{ text_id|tooltip_content_id }}">{{ content }}</p>
diff --git a/wdfn-server/waterdata/templates/partials/social_share.html b/wdfn-server/waterdata/templates/partials/social_share.html
index dad9578af562ff713a77094188a1e1749119a126..ce6aebe6dbc718fc4fee24d48cd0eb07a109e9a9 100644
--- a/wdfn-server/waterdata/templates/partials/social_share.html
+++ b/wdfn-server/waterdata/templates/partials/social_share.html
@@ -3,10 +3,10 @@
{% with share_encoded_url = url_for(request.endpoint, _external=True, **request.view_args)|urlencode %}
<div class="social-share">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ share_encoded_url }}" target="_blank">
- <i class="fa fa-facebook-square" aria-label="Share on Facebook"></i>
+ <i class="fab fa-facebook-square" aria-label="Share on Facebook"></i>
</a>
<a href="https://twitter.com/home?status={{ share_encoded_url }}" target="_blank">
- <i class="fa fa-twitter-square" aria-label="Share on Twitter"></i>
+ <i class="fab fa-twitter-square" aria-label="Share on Twitter"></i>
</a>
<span class="embed-container">
{% if config.EMBED_IMAGE_FEATURE_ENABLED %}{{ components.EmbedComponent(site_no) }}{% endif %}