DBC22-1932: Added external link icon to be embedded automatically

bcgov · Mar 20, 2024 · b044b47 · b044b47
1 parent afec10f
commit b044b47
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html
@@ -23,7 +23,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <script src="https://kit.fontawesome.com/f015f2c1fc.js" crossorigin="anonymous"></script>
     <title>DriveBC</title>
   </head>
 

diff --git a/src/frontend/src/App.scss b/src/frontend/src/App.scss
@@ -151,15 +151,18 @@ a[target="_blank"] {
   position: relative;
   margin-right: 18px;
 
-  &:after {
+  &:not(.social-icon):after {
     position: absolute;
-    top: 2px;
+    top: 0;
     right: -18px;
-    font: var(--fa-font-regular);
-    content: '\f08e';
+    //content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' alt='external link'%3E%3Cpath fill='%23474543' d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'%3E%3C/path%3E%3C/svg%3E");
+    content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' alt='external link'%3E%3Cpath fill='%23474543' d='M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16H457.4L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6V176c0 8.8 7.2 16 16 16s16-7.2 16-16V16c0-8.8-7.2-16-16-16H336zM64 32C28.7 32 0 60.7 0 96V448c0 35.3 28.7 64 64 64H416c35.3 0 64-28.7 64-64V304c0-8.8-7.2-16-16-16s-16 7.2-16 16V448c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32H208c8.8 0 16-7.2 16-16s-7.2-16-16-16H64z'/%3E%3C/svg%3E");
+
     display: inline-block;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     color: $Type-Secondary;
+    width: 0.875rem;
   }
-}
+}
+
diff --git a/src/frontend/src/Footer.js b/src/frontend/src/Footer.js
@@ -46,13 +46,13 @@ export default function Footer(props) {
         </div>
         <div className='bottom'>
           <div className="connect">
-            <a href="https://twitter.com/DriveBC" className="footer-link" target="_blank" rel="noreferrer"  alt="Twitter" aria-hidden="true" aria-label="Twitter">
+            <a href="https://twitter.com/DriveBC" className="footer-link social-icon" target="_blank" rel="noreferrer"  alt="Twitter" aria-hidden="true" aria-label="Twitter">
               <FontAwesomeIcon icon={faXTwitter} />
             </a>
-            <a href="https://www.instagram.com/ministryoftranbc/" className="footer-link" target="_blank" rel="noreferrer"  alt="Instagram" aria-hidden="true" aria-label="Instagram">
+            <a href="https://www.instagram.com/ministryoftranbc/" className="footer-link  social-icon" target="_blank" rel="noreferrer"  alt="Instagram" aria-hidden="true" aria-label="Instagram">
               <FontAwesomeIcon icon={faInstagram}/>
             </a>
-            <a href="https://www.linkedin.com/company/british-columbia-ministry-of-transportation-and-infrastructure/" className="footer-link" target="_blank" rel="noreferrer" alt="Linkedin" aria-hidden="true" aria-label="Linkedin">
+            <a href="https://www.linkedin.com/company/british-columbia-ministry-of-transportation-and-infrastructure/" className="footer-link  social-icon" target="_blank" rel="noreferrer" alt="Linkedin" aria-hidden="true" aria-label="Linkedin">
               <FontAwesomeIcon icon={faLinkedin}/>
             </a>
           </div>