From 08190d38dd0e7b1248aff1f46a160fbeec40b427 Mon Sep 17 00:00:00 2001
From: "egon w. stemle" <github@iiegn.de>
Date: Fri, 13 Nov 2020 02:53:13 +0100
Subject: [PATCH] fix: use Font Awesome for CC icons in page footer (#1932)

The CC SVG icons, e.g.
 - `<img src="https://search.creativecommons.org/static/img/cc_icon.svg" alt="CC icon">`
started resulting in 404 errors.

[Creative Commons Site](https://creativecommons.org/about/downloads/)
currently suggest something like
 - `<img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="CC icon">`

But we can get the CC icons from the fab icon pack which is even better.
---
 wowchemy/assets/scss/wowchemy/_footer.scss         |  3 +--
 wowchemy/layouts/partials/site_footer_license.html | 12 ++++++------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/wowchemy/assets/scss/wowchemy/_footer.scss b/wowchemy/assets/scss/wowchemy/_footer.scss
index 1cd9f0ab..ea5110b9 100644
--- a/wowchemy/assets/scss/wowchemy/_footer.scss
+++ b/wowchemy/assets/scss/wowchemy/_footer.scss
@@ -34,11 +34,10 @@ footer .powered-by {
   list-style: none;
   height: auto;
   width: auto;
-  font-size: 0;  // Hack to remove space characters between icons without using UL.
   text-decoration: none;
 }
 
-.footer-license-icons img {
+.footer-license-icons i {
  display: inline-flex;
   margin-right: 8px;
   height: 22px;
diff --git a/wowchemy/layouts/partials/site_footer_license.html b/wowchemy/layouts/partials/site_footer_license.html
index 82d6bf93..bed1c614 100644
--- a/wowchemy/layouts/partials/site_footer_license.html
+++ b/wowchemy/layouts/partials/site_footer_license.html
@@ -28,16 +28,16 @@
   {{ end }}
 
   <p class="powered-by footer-license-icons">
-    <a href="{{$license_url}}" rel="noopener noreferrer" target="_blank">
-      <img src="https://search.creativecommons.org/static/img/cc_icon.svg" alt="CC icon">
-      <img src="https://search.creativecommons.org/static/img/cc-by_icon.svg" alt="CC by icon">
+    <a href="{{$license_url}}" rel="noopener noreferrer" target="_blank" aria-label="Creative Commons">
+      <i class="fab fa-creative-commons fa-2x" aria-hidden="true"></i>
+      <i class="fab fa-creative-commons-by fa-2x" aria-hidden="true"></i>
       {{ if not $allow_commercial }}
-        <img src="https://search.creativecommons.org/static/img/cc-nc_icon.svg" alt="CC NC icon">
+        <i class="fab fa-creative-commons-nc fa-2x" aria-hidden="true"></i>
       {{end}}
       {{ if and $allow_derivatives $share_alike }}
-        <img src="https://search.creativecommons.org/static/img/cc-sa_icon.svg" alt="CC SA icon">
+        <i class="fab fa-creative-commons-sa fa-2x" aria-hidden="true"></i>
       {{ else if not $allow_derivatives }}
-        <img src="https://search.creativecommons.org/static/img/cc-nd_icon.svg" alt="CC ND icon">
+        <i class="fab fa-creative-commons-nd fa-2x" aria-hidden="true"></i>
       {{end}}
     </a>
   </p>