From 17dce0bde6b37c7a5a57a76682b69f33c5e19a6e Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Tue, 24 Aug 2021 16:50:02 -0500
Subject: [PATCH] Eliminated font-awesome from the python templates
---
assets/package-lock.json | 5 -----
assets/package.json | 3 +--
.../src/scripts/d3-rendering/info-tooltip.js | 3 +--
.../scripts/d3-rendering/loading-indicator.js | 3 +--
.../d3-rendering/loading-indicator.test.js | 1 -
.../components/hydrograph/download-data.js | 7 ++++---
.../components/hydrograph/index.test.js | 2 +-
.../components/hydrograph/parameters.test.js | 12 +++++------
.../components/hydrograph/select-actions.js | 16 +++++++-------
.../components/map/legend.js | 10 ++++-----
.../components/map/legend.test.js | 4 ++--
assets/src/styles/components/_map.scss | 6 ++++++
assets/src/styles/components/_network.scss | 10 +++++++++
.../styles/components/hydrograph/_app.scss | 8 +++++++
assets/src/styles/main.scss | 5 -----
assets/src/styles/network.scss | 5 -----
.../styles/pages/_monitoring-location.scss | 10 +++++++++
assets/src/styles/partials/_alerts.scss | 4 ++++
.../src/styles/partials/_select-actions.scss | 12 ++++++-----
assets/src/styles/partials/_social-share.scss | 14 ++++++++-----
.../waterdata/templates/base_plain.html | 2 ++
.../templates/macros/components.html | 21 ++++++++++++++-----
.../waterdata/templates/partials/header.html | 6 +++++-
.../templates/partials/social_share.html | 14 +++++++++----
24 files changed, 117 insertions(+), 66 deletions(-)
diff --git a/assets/package-lock.json b/assets/package-lock.json
index f4cfd47da..affe25376 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 18543291b..7f3689b58 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 ef969d9ef..4dc1faba0 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 5fdfd32b8..27e409072 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 d6df6b9d0..2a3b825ac 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 5c572cbd1..293ba454d 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 9989ecaa4..18fbdd165 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 2938a151c..e2a797b7b 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 37f497619..c52aade5f 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 512069952..8f5824305 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 c5dc28f1c..71cbdaa60 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 22271baad..723890420 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 8c632f960..dadd96dc7 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 136e325e3..598f55aee 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 16b34b6bc..a1326e9b6 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 6bda8093e..637ccbf5d 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 bb70bb64d..5a5879728 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 174d73977..c0f83b5f3 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 3931d8ba9..26562e69d 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 85aa886b0..b17f0ff44 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 e6ac7ab93..5a743fd04 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 f8f18be0b..308f2323f 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 171e728e4..fd64f6efe 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 9bf043858..12ea67b43 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 %}
--
GitLab