diff --git a/assets/package-lock.json b/assets/package-lock.json
index f4cfd47da96284e4a8e061fb9757934b3d5594a3..affe253765b51d4db67da3fb44eec70a994f6588 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -1369,11 +1369,6 @@
}
}
},
- "@fortawesome/fontawesome-free": {
- "version": "5.15.4",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
- "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
- },
"@humanwhocodes/config-array": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
diff --git a/assets/package.json b/assets/package.json
index 18543291b69c9d711824d851b38722c77487906b..7f3689b5885c6da11378075bb2d3daf19f4c577e 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -13,7 +13,7 @@
"build:css:main": "sass --load-path node_modules/leaflet/dist --load-path node_modules/wdfn-viz/src/stylesheets --load-path node_modules/uswds/src/stylesheets src/styles/main.scss dist/main.css && postcss dist/main.css --map -o dist/main.css",
"build:css:graph": "sass --load-path node_modules/wdfn-viz/src/stylesheets --load-path node_modules/uswds/src/stylesheets src/styles/graph.scss dist/graph.css && postcss dist/graph.css --map -o dist/graph.css",
"build:css:network": "sass --load-path node_modules/leaflet/dist --load-path node_modules/wdfn-viz/src/stylesheets --load-path node_modules/uswds/src/stylesheets src/styles/network.scss dist/network.css && postcss dist/network.css --map -o dist/network.css",
- "build:fonts": "mkdir -p dist/fonts && cp -r node_modules/uswds/src/fonts/* dist/fonts && cp node_modules/@fortawesome/fontawesome-free/webfonts/* dist/fonts",
+ "build:fonts": "mkdir -p dist/fonts && cp -r node_modules/uswds/src/fonts/* dist/fonts",
"build:images": "mkdir -p dist/img && mkdir -p dist/images && cp -r node_modules/uswds/src/img/* dist/img && cp -r node_modules/wdfn-viz/src/img/* dist/img && cp -r node_modules/leaflet/dist/images/* dist/images && cp -r src/img/* dist/img",
"build:js": "rollup -c --environment NODE_ENV:production && mkdir -p dist/scripts",
"build:wdfnviz": "mkdir -p dist/scripts && cp node_modules/wdfn-viz/dist/wdfnviz.js dist/scripts",
@@ -78,7 +78,6 @@
"terser": "5.7.1"
},
"dependencies": {
- "@fortawesome/fontawesome-free": "5.15.4",
"autotrack": "2.4.1",
"d3-array": "3.0.1",
"d3-axis": "3.0.0",
diff --git a/assets/src/scripts/d3-rendering/info-tooltip.js b/assets/src/scripts/d3-rendering/info-tooltip.js
index ef969d9ef0bfa7fa434fc8b12aeca5d15e69d506..4dc1faba0c4e82152c049b6634208a711d97d099 100644
--- a/assets/src/scripts/d3-rendering/info-tooltip.js
+++ b/assets/src/scripts/d3-rendering/info-tooltip.js
@@ -18,8 +18,7 @@ export const appendInfoTooltip = function(elem, text) {
.attr('title', text);
tooltip.append('svg')
.attr('class', 'usa-icon')
- .append('use')
- .attr('xlink:href', `${config.STATIC_URL}img/sprite.svg#info`);
+ .html(`<use xlink:href="${config.STATIC_URL}img/sprite.svg#info"></use>`);
// Need to initialize USWDS tooltip explictly after page load
uswds_tooltip.on(elem.node());
diff --git a/assets/src/scripts/d3-rendering/loading-indicator.js b/assets/src/scripts/d3-rendering/loading-indicator.js
index 5fdfd32b85604cf6977263898a3c1943c642d847..27e40907202516d07607e5f66a3d8dec3cfe8091 100644
--- a/assets/src/scripts/d3-rendering/loading-indicator.js
+++ b/assets/src/scripts/d3-rendering/loading-indicator.js
@@ -13,7 +13,6 @@ export const drawLoadingIndicator = function(elem, {showLoadingIndicator}) {
.attr('class', 'loading-indicator rotate usa-icon')
.attr('aria-hidden', 'true')
.attr('role', 'img')
- .append('use')
- .attr('xlink:href', `${config.STATIC_URL}img/sprite.svg#loop`);
+ .html(`<use xlink:href="${config.STATIC_URL}img/sprite.svg#loop"></use>`);
}
};
\ No newline at end of file
diff --git a/assets/src/scripts/d3-rendering/loading-indicator.test.js b/assets/src/scripts/d3-rendering/loading-indicator.test.js
index d6df6b9d098e1582fd3f329b7c75a9f086086cb8..2a3b825ac975d1ecd3e5af6c93297200def80587 100644
--- a/assets/src/scripts/d3-rendering/loading-indicator.test.js
+++ b/assets/src/scripts/d3-rendering/loading-indicator.test.js
@@ -16,7 +16,6 @@ describe('loading indicator', () => {
it('loading indicator should be visible', () => {
div.call(drawLoadingIndicator, {showLoadingIndicator: true});
- // <i class="loading-indicator fas fa-3x fa-spin fa-spinner">
expect(select('.loading-indicator').size()).toBe(1);
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js
index 5c572cbd17708291076d13dda6a23490a756f3c8..293ba454d11215713ea8b48ab1d4d531dcf317fe 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/download-data.js
@@ -202,10 +202,11 @@ export const drawDownloadForm = function(container, store, siteno) {
});
}
});
- downloadButton.append('i')
- .attr('class', 'fas fa-file-download')
+ downloadButton.append('svg')
+ .attr('class', 'usa-icon')
.attr('aria-hidden', true)
- .attr('role', 'img');
+ .attr('role', 'img')
+ .html(`<use xlink:href="${config.STATIC_URL}img/sprite.svg#file_download"></use>`);
downloadButton.append('span').text('Retrieve');
downloadContainer.append('div')
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
index 9989ecaa41cb63969b04a9fe9d125c5cb7c12707..18fbdd165ef993a2a4cc463f2ea29fde9f25f5d1 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.test.js
@@ -280,7 +280,7 @@ describe('monitoring-location/components/hydrograph module', () => {
});
it('should render the correct number of svg nodes', () => {
- expect(selectAll('svg').size()).toBe(4);
+ expect(select('#hydrograph').select('.graph-container').selectAll('svg').size()).toBe(5);
});
it('should have a title div', () => {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js
index 2938a151ce56d0b7812e9e9b0ae4db35b6861761..e2a797b7b305af2d2fbbf95123492ef1d3281f1b 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js
@@ -177,15 +177,15 @@ describe('monitoring-location/components/hydrograph/parameters module', () => {
const clickedIconToggleOne = div.select('#expansion-toggle-desktop-72019');
const clickedIconToggleTwo = div.select('#expansion-toggle-desktop-00010F');
- expect(container.selectAll('.fa-chevron-up').size()).toBe(0);
- expect(container.selectAll('.fa-chevron-down').size()).toBe(8);
+ expect(container.selectAll('.expansion-toggle-less').size()).toBe(0);
+ expect(container.selectAll('.expansion-toggle-more').size()).toBe(8);
clickedIconToggleOne.dispatch('click');
- expect(container.selectAll('.fa-chevron-up').size()).toBe(2);
- expect(container.selectAll('.fa-chevron-down').size()).toBe(6);
+ expect(container.selectAll('.expansion-toggle-less').size()).toBe(2);
+ expect(container.selectAll('.expansion-toggle-more').size()).toBe(6);
clickedIconToggleTwo.dispatch('click'); // test that a second click closes all previously selected icons
- expect(container.selectAll('.fa-chevron-up').size()).toBe(2);
- expect(container.selectAll('.fa-chevron-down').size()).toBe(6);
+ expect(container.selectAll('.expansion-toggle-less').size()).toBe(2);
+ expect(container.selectAll('.expansion-toggle-more').size()).toBe(6);
});
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js b/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
index 37f49761927fb377e57131ee44172484e41acbd3..c52aade5fc2fb3510d624be629feae782f5c533d 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js
@@ -8,7 +8,7 @@ import {drawDownloadForm} from './download-data';
/*
* Helper function to render a select action button on listContainer
*/
-const appendButton = function(listContainer, {faIcon, buttonLabel, idOfDivToControl}) {
+const appendButton = function(listContainer, {uswdsIcon, buttonLabel, idOfDivToControl}) {
const button = listContainer.append('li')
.attr('class', 'usa-button-group__item')
.append('button')
@@ -36,11 +36,13 @@ const appendButton = function(listContainer, {faIcon, buttonLabel, idOfDivToCont
actionContainer.attr('hidden', wasSelected ? true : null);
});
- if (faIcon) {
- button.append('i')
- .attr('class', `fas ${faIcon}`)
- .attr('aria-hidden', true)
- .attr('role', 'img');
+
+ if (uswdsIcon) {
+ button.append('svg')
+ .attr('class', 'usa-icon')
+ .attr('aria-hidden', 'true')
+ .attr('role', 'img')
+ .html(`<use xlink:href="${config.STATIC_URL}img/sprite.svg#${uswdsIcon}"></use>`);
}
button.append('span').html(buttonLabel);
return button;
@@ -68,7 +70,7 @@ export const drawSelectActions = function(container, store, siteno, agencyCode)
}
appendButton(listContainer, {
- faIcon: 'fa-file-download',
+ uswdsIcon: 'file_download',
buttonLabel: 'Retrieve data',
idOfDivToControl: 'download-graph-data-container'
});
diff --git a/assets/src/scripts/monitoring-location/components/map/legend.js b/assets/src/scripts/monitoring-location/components/map/legend.js
index 512069952b05358edeefa1b583fd9683a220ef55..8f582430573cde3b206d1ed6a7eef06b28d9b09a 100644
--- a/assets/src/scripts/monitoring-location/components/map/legend.js
+++ b/assets/src/scripts/monitoring-location/components/map/legend.js
@@ -49,12 +49,12 @@ export const drawMonitoringLocationMarkerLegend = function(legendListContainer)
export const drawCircleMarkerLegend = function(legendListContainer, color, opacity, label) {
const container = legendListContainer.append('ul')
.classed('usa-list--unstyled', true);
- container.append('li')
- .append('span')
+ const listItem = container.append('li');
+ listItem.append('span')
.attr('style',
- `color: ${color}; width: 16px; height: 16px; float: left; opacity: ${opacity}; margin-right: 2px;`)
- .attr('class', 'fas fa-circle');
- container.append('span').text(label);
+ `background-color: ${color}; width: 16px; height: 16px; float: left; opacity: ${opacity}; margin-right: 2px;`)
+ .attr('class', 'dot');
+ listItem.append('span').text(label);
};
diff --git a/assets/src/scripts/monitoring-location/components/map/legend.test.js b/assets/src/scripts/monitoring-location/components/map/legend.test.js
index c5dc28f1ce0d876694fb9164fec9b31675a5a36c..71cbdaa60b98207c8f51cb6b93b24863b485c644 100644
--- a/assets/src/scripts/monitoring-location/components/map/legend.test.js
+++ b/assets/src/scripts/monitoring-location/components/map/legend.test.js
@@ -31,9 +31,9 @@ describe('monitoring-location/components/map/legend module', () => {
it('Draws a circle marker legend', () => {
drawCircleMarkerLegend(listContainer, 'red', 0.5, 'My circle marker');
- let circleSpan = listContainer.select('.fa-circle');
+ let circleSpan = listContainer.select('.dot');
expect(circleSpan.size()).toBe(1);
- expect(circleSpan.style('color')).toEqual('red');
+ expect(circleSpan.style('background-color')).toEqual('red');
expect(circleSpan.style('opacity')).toEqual('0.5');
expect(listContainer.select('span:nth-child(2)').text()).toEqual('My circle marker');
});
diff --git a/assets/src/styles/components/_map.scss b/assets/src/styles/components/_map.scss
index 22271baadcdb5ed67fba03ac13a8f9df1f63dbd1..723890420c9cfbdb1a971f66d98f6bbadc920947 100644
--- a/assets/src/styles/components/_map.scss
+++ b/assets/src/styles/components/_map.scss
@@ -18,6 +18,12 @@
padding: 2px;
background-color: white;
+ .dot {
+ height: 14px;
+ width: 14px;
+ border-radius: 50%;
+ }
+
.legend-expand-container {
font-size: 14px;
font-weight: bold;
diff --git a/assets/src/styles/components/_network.scss b/assets/src/styles/components/_network.scss
index 8c632f960273862cf74c919570d490a5e2d26ba2..dadd96dc7266fcbfe089604323961bd36b417405 100644
--- a/assets/src/styles/components/_network.scss
+++ b/assets/src/styles/components/_network.scss
@@ -1,3 +1,13 @@
+#contact-info {
+ @include u-display('flex');
+ @include u-flex('row');
+ @include u-flex('align-center');
+
+ svg {
+ @include u-width(4);
+ @include u-height(4);
+ }
+}
#network-map {
height: 350px;
margin: 1em 0;
diff --git a/assets/src/styles/components/hydrograph/_app.scss b/assets/src/styles/components/hydrograph/_app.scss
index 136e325e32ad5072c81d1056d67189b8e58ca3fa..598f55aee774faae5eae998ccb3b24a85882cae0 100644
--- a/assets/src/styles/components/hydrograph/_app.scss
+++ b/assets/src/styles/components/hydrograph/_app.scss
@@ -76,6 +76,14 @@
.alert-error-container {
@include u-margin-top(2);
}
+ .download-selected-data {
+ @include u-display('flex');
+ @include u-flex('row');
+ @include u-flex('align-center');
+ svg {
+ @include u-margin-right('05');
+ }
+ }
}
#hydrograph-wrapper {
diff --git a/assets/src/styles/main.scss b/assets/src/styles/main.scss
index 16b34b6bc149b3d5ca4193497b6ff9d9b0eac671..a1326e9b6d5ce863745959c54621a4dc394f35f1 100644
--- a/assets/src/styles/main.scss
+++ b/assets/src/styles/main.scss
@@ -2,11 +2,6 @@
@import './common';
-$fa-font-path: './fonts' !default;
-@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
-@import '../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss';
-@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
-
@import './partials/parameter-list';
@import './partials/script';
@import './partials/select-actions';
diff --git a/assets/src/styles/network.scss b/assets/src/styles/network.scss
index 6bda8093e1810ede070510529d50cf292b5db8a7..637ccbf5dfd0f0dcd761db1ec09b286db4639c2b 100644
--- a/assets/src/styles/network.scss
+++ b/assets/src/styles/network.scss
@@ -4,11 +4,6 @@
@import 'common';
-$fa-font-path: './fonts' !default;
-@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
-@import '../../node_modules/@fortawesome/fontawesome-free/scss/brands';
-@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid';
-
@import './partials/alerts';
@import './partials/script';
diff --git a/assets/src/styles/pages/_monitoring-location.scss b/assets/src/styles/pages/_monitoring-location.scss
index bb70bb64d30927a4958db8cf7e1a2cbe9571ec71..5a5879728b39164fb57cc879ef25012822c6a6f8 100644
--- a/assets/src/styles/pages/_monitoring-location.scss
+++ b/assets/src/styles/pages/_monitoring-location.scss
@@ -1,4 +1,14 @@
+.help-tooltip {
+ svg {
+ @include u-width('205');
+ @include u-height('205');
+ }
+}
.site-header {
+ svg {
+ @include u-width(3);
+ @include u-height(3);
+ }
margin-bottom: 2em;
.usa-label {
diff --git a/assets/src/styles/partials/_alerts.scss b/assets/src/styles/partials/_alerts.scss
index 174d739771cfd506bae406dd83152ecd5261d011..c0f83b5f3e1545624d28c87fc9e4383fabecbcaa 100644
--- a/assets/src/styles/partials/_alerts.scss
+++ b/assets/src/styles/partials/_alerts.scss
@@ -17,6 +17,10 @@
cursor: pointer;
margin-top: -5px;
margin-right: -10px;
+ svg {
+ @include u-width(3);
+ @include u-height(3);
+ }
}
.div {
diff --git a/assets/src/styles/partials/_select-actions.scss b/assets/src/styles/partials/_select-actions.scss
index 3931d8ba965cfce9b44c76660c355305f67948d2..26562e69da3222d3503e583e2dbe14c414a7a210 100644
--- a/assets/src/styles/partials/_select-actions.scss
+++ b/assets/src/styles/partials/_select-actions.scss
@@ -10,11 +10,6 @@ $select-actions-container-color: 'base-lightest';
@include u-border($base-action-color);
@include u-radius('md');
@include u-margin-y(2);
- .usa-button {
- i {
- @include u-margin-right('05');
- }
- }
.select-actions-button-group {
@include u-bg($base-action-color);
@@ -27,11 +22,18 @@ $select-actions-container-color: 'base-lightest';
}
.usa-button {
+ position: relative;
@include u-bg($base-action-color);
@include u-border-left($action-separator-color);
@include u-border-left('05');
@include u-radius(0);
@include u-text('white');
+ @include u-display('flex');
+ @include u-flex('row');
+ @include u-flex('align-center');
+ svg {
+ @include u-margin-right('05');
+ }
}
.usa-button-group__item:first-child {
.usa-button {
diff --git a/assets/src/styles/partials/_social-share.scss b/assets/src/styles/partials/_social-share.scss
index 85aa886b0fc7c62d2f8b04d3675b4758e9ed5d7e..b17f0ff4467abf31345ae4d17d0fe38740a03d04 100644
--- a/assets/src/styles/partials/_social-share.scss
+++ b/assets/src/styles/partials/_social-share.scss
@@ -2,15 +2,19 @@
position: relative;
font-size: 1.25em;
- a {
- text-decoration: none;
-
- .fa-facebook-square {
+ .social-share-facebook{
+ svg {
color: #3c5a96;
}
+ }
- .fa-twitter-square {
+ .social-share-twitter {
+ svg {
color: #32aade;
}
}
+
+ a {
+ text-decoration: none;
+ }
}
diff --git a/wdfn-server/waterdata/templates/base_plain.html b/wdfn-server/waterdata/templates/base_plain.html
index e6ac7ab936a395baf89cf21b0129d2a39ffc5b2f..5a743fd046544a7e8a84b6125350d303c24387e6 100644
--- a/wdfn-server/waterdata/templates/base_plain.html
+++ b/wdfn-server/waterdata/templates/base_plain.html
@@ -15,6 +15,8 @@
<link rel="manifest" href="{{ 'img/favicon_device_specific/site.webmanifest' | asset_url }}">
<link rel="mask-icon" href="{{ 'img/favicon_device_specific/safari-pinned-tab.svg' | static_url }}" color="#007150">
<link rel="shortcut icon" href="{{ 'img/favicon_device_specific/favicon.ico' | asset_url }}">
+ <link rel="preload" as="font" type="font/woff2" crossorigin href="{{ 'fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2' | asset_url }}" />
+ <link rel="preload" as="font" type="font/woff2" crossorigin href="{{ 'fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2' | asset_url }}" />
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="{{ 'img/favicon_device_specific/browserconfig.xml' | asset_url }}">
<meta name="theme-color" content="#ffffff">
diff --git a/wdfn-server/waterdata/templates/macros/components.html b/wdfn-server/waterdata/templates/macros/components.html
index f8f18be0b57b31cf887373fc7f2b99798138971e..308f2323f49d4e9c6f282a9276c0bb39088a8211 100644
--- a/wdfn-server/waterdata/templates/macros/components.html
+++ b/wdfn-server/waterdata/templates/macros/components.html
@@ -73,8 +73,14 @@
<label class="bold-label" for="contact-info">Network Contact</label><br>
<span id="contact-info">
<span id="contact-name">{{ collection.properties.contactInformation.contactName }}</span>
- <span><a class="usa-link" href="mailto:{{ collection.properties.contactInformation.contactEmail }}"><i class="fas fa-envelope"></i></a>
- <a id="contact-email" class="usa-link" href="mailto:{{ collection.properties.contactInformation.contactEmail }}">{{ collection.properties.contactInformation.contactEmail }}</a></span>
+ <a class="usa-link" href="mailto:{{ collection.properties.contactInformation.contactEmail }}">
+ <svg aria-hidden="true" role="img">
+ <use xlink:href="{{ 'img/sprite.svg#mail' | static_url }}"></use>
+ </svg>
+ </a>
+ <a id="contact-email" class="usa-link" href="mailto:{{ collection.properties.contactInformation.contactEmail }}">
+ {{ collection.properties.contactInformation.contactEmail }}
+ </a>
</span>
{% endif %}
{% endif %}
@@ -127,7 +133,10 @@
{% macro EmbedComponent(site_no) -%}
<span class="wdfn-component" data-component="embed">
- <i class="embed-icon has-script fas fa-code"></i>
+ <svg aria-labelled-by="social-media-embed" role="img">
+ <title id="social-media-embed">Embed snippet</title>
+ <use xlink:href="{{ 'img/sprite.svg#code' | static_url }}"></use>
+ </svg>
<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>
@@ -202,8 +211,10 @@
{%- endmacro %}
{% macro QuestionTooltip(text_id, content, external_desc) -%}
- <div class="usa-tooltip" data-position="right" title="{{ content }}" {% if not external_desc %}aria-describedby="{{ text_id|tooltip_content_id }}"{% endif %}>
- <i class="fas fa-question-circle" aria-hidden="true"></i>
+ <div class="usa-tooltip help-tooltip" data-position="right" title="{{ content }}" {% if not external_desc %}aria-describedby="{{ text_id|tooltip_content_id }}"{% endif %}>
+ <svg aria-hidden="true" role="img">
+ <use xlink:href="{{ 'img/sprite.svg#help' | static_url }}"></use>
+ </svg>
</div>
{%- endmacro %}
diff --git a/wdfn-server/waterdata/templates/partials/header.html b/wdfn-server/waterdata/templates/partials/header.html
index 171e728e491299427d324cbdf24e35cf880e2b46..fd64f6efecf2d7e7c77a0672dc003429580efba5 100644
--- a/wdfn-server/waterdata/templates/partials/header.html
+++ b/wdfn-server/waterdata/templates/partials/header.html
@@ -166,7 +166,11 @@
<header 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="fas fa-times"></i></label>
+ <label title="Close" class="close" for="wdfn-alert-dismiss">
+ <svg aria-hidden="true" role="img">
+ <use xlink:href="{{ 'img/sprite.svg#close' | static_url }}"></use>
+ </svg>
+ </label>
<div>
<ul>
<li>Beta release</li>
diff --git a/wdfn-server/waterdata/templates/partials/social_share.html b/wdfn-server/waterdata/templates/partials/social_share.html
index 9bf043858d4b2bd8e1b3f582545d7cfb6b21f9db..12ea67b437d8193d17965e1ed9df0e27248b41d3 100644
--- a/wdfn-server/waterdata/templates/partials/social_share.html
+++ b/wdfn-server/waterdata/templates/partials/social_share.html
@@ -2,11 +2,17 @@
{% 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" rel="noopener">
- <i class="fab fa-facebook-square" aria-label="Share on Facebook"></i>
+ <a class="social-share-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ share_encoded_url }}" target="_blank" rel="noopener">
+ <svg aria-labbeled_by="social-share-facebook" role="img">
+ <title id="social-share-facebook">Share on Facebook</title>
+ <use xlink:href="{{ 'img/sprite.svg#facebook' | static_url }}"></use>
+ </svg>
</a>
- <a href="https://twitter.com/home?status={{ share_encoded_url }}" target="_blank" rel="noopener">
- <i class="fab fa-twitter-square" aria-label="Share on Twitter"></i>
+ <a class="social-share-twitter" href="https://twitter.com/home?status={{ share_encoded_url }}" target="_blank" rel="noopener">
+ <svg aria-labbeled_by="social-share-twitter" role="img">
+ <title id="social-share-twitter">Share on Twitter</title>
+ <use xlink:href="{{ 'img/sprite.svg#twitter' | static_url }}"></use>
+ </svg>
</a>
<span class="embed-container">
{% if config.EMBED_IMAGE_FEATURE_ENABLED %}{{ components.EmbedComponent(site_no) }}{% endif %}