Merge pull request #83 from ess-uofc/Chore--Update-Icons-from-Fonts-to-SVGs

Update Social Icons from Fonts to SVGs

Author: mmmbelger

config.toml

@@ -159,14 +159,17 @@ preloader = ""
 
 # Social
 [[params.social]]
-icon = "ion-social-instagram-outline"
+svg = "icons/logo-discord.html"
+link = "https://discord.com/invite/9mUubJU"
+[[params.social]]
+svg = "icons/logo-instagram.html"
 link = "https://www.instagram.com/ess_uofc/"
 [[params.social]]
-icon = "ion-social-linkedin-outline"
+svg = "icons/logo-linkedin.html"
 link = "https://www.linkedin.com/company/engineering-students%27-society-u-of-c-/"
 [[params.social]]
-icon = "ion-social-facebook-outline"
+svg = "icons/logo-facebook.html"
 link = "https://www.facebook.com/UofC.ESS"
 [[params.social]]
-icon = "ion-social-twitter-outline"
-link = "https://twitter.com/ESS_UofC"
+svg = "icons/logo-x.html"
+link = "https://x.com/ESS_UofC"

themes/airspace-hugo/assets/scss/templates/_contact.scss

@@ -58,7 +58,7 @@
 
   li {
     display: inline-block;
-    margin: 0 6px;
+    margin: 0 7.5px;
   }
 
   a {
@@ -70,6 +70,11 @@
     margin-right: 25px;
     font-size: 25px;
   }
+
+  svg {
+    width: 30px;
+    height: 30px;
+  }
 }
 
 .google-map {

themes/airspace-hugo/layouts/contact/list.html

@@ -43,7 +43,11 @@ <h2>{{ i18n "address_title" }}</h2>
           </ul>
           <ul class="social-icons">
             {{ range .Site.Params.social }}
-            <li><a href="{{ .link | safeURL }}"><i class="{{ .icon }}"></i></a></li>
+            <li>
+              <a href="{{ .link | safeURL }}">
+                {{ partial .svg . }}
+              </a>
+            </li>
             {{ end }}
           </ul>
         </div>

themes/airspace-hugo/layouts/partials/icons/logo-discord.html

@@ -0,0 +1,2 @@
+<!-- logo-discord.html -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464,66.52A50,50,0,0,0,414.12,17L97.64,16A49.65,49.65,0,0,0,48,65.52V392c0,27.3,22.28,48,49.64,48H368l-13-44L464,496ZM324.65,329.81s-8.72-10.39-16-19.32C340.39,301.55,352.5,282,352.5,282a139,139,0,0,1-27.85,14.25,173.31,173.31,0,0,1-35.11,10.39,170.05,170.05,0,0,1-62.72-.24A184.45,184.45,0,0,1,191.23,296a141.46,141.46,0,0,1-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62,19.09,42.38,28.26c-7.27,9.18-16.23,19.81-16.23,19.81-53.51-1.69-73.85-36.47-73.85-36.47,0-77.06,34.87-139.62,34.87-139.62,34.87-25.85,67.8-25.12,67.8-25.12l2.42,2.9c-43.59,12.32-63.44,31.4-63.44,31.4s5.32-2.9,14.28-6.77c25.91-11.35,46.5-14.25,55-15.21a24,24,0,0,1,4.12-.49,205.62,205.62,0,0,1,48.91-.48,201.62,201.62,0,0,1,72.89,22.95S333.61,145,292.44,132.7l3.39-3.86S329,128.11,363.64,154c0,0,34.87,62.56,34.87,139.62C398.51,293.34,378.16,328.12,324.65,329.81Z"/><path d="M212.05,218c-13.8,0-24.7,11.84-24.7,26.57s11.14,26.57,24.7,26.57c13.8,0,24.7-11.83,24.7-26.57C237,229.81,225.85,218,212.05,218Z"/><path d="M300.43,218c-13.8,0-24.7,11.84-24.7,26.57s11.14,26.57,24.7,26.57c13.81,0,24.7-11.83,24.7-26.57S314,218,300.43,218Z"/></svg>

themes/airspace-hugo/layouts/partials/icons/logo-facebook.html

@@ -0,0 +1,2 @@
+<!-- logo-facebook.html -->
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,257.35c0-123.7-100.3-224-224-224s-224,100.3-224,224c0,111.8,81.9,204.47,189,221.29V322.12H164.11V257.35H221V208c0-56.13,33.45-87.16,84.61-87.16,24.51,0,50.15,4.38,50.15,4.38v55.13H327.5c-27.81,0-36.51,17.26-36.51,35v42h62.12l-9.92,64.77H291V478.66C398.1,461.85,480,369.18,480,257.35Z" fill-rule="evenodd"/></svg>

themes/airspace-hugo/layouts/partials/icons/logo-instagram.html

@@ -0,0 +1,2 @@
+<!-- logo-instagram.html -->
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"/><path d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"/><path d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"/></svg>

themes/airspace-hugo/layouts/partials/icons/logo-linkedin.html

@@ -0,0 +1,2 @@
+<!-- logo-linkedin.html -->
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/></svg>

themes/airspace-hugo/layouts/partials/icons/logo-x.html

@@ -0,0 +1,4 @@
+<!-- logo-x.html -->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.33349 6.92867L14.5459 1H13.3109L8.78291 6.14671L5.16908 1H1L6.46604 8.78342L1 15H2.235L7.01369 9.56363L10.8309 15H15L9.33349 6.92867ZM7.64142 8.85175L7.08675 8.07621L2.68037 1.91103H4.57759L8.13472 6.88838L8.68705 7.66391L13.3103 14.1334H11.4131L7.64142 8.85175Z" fill="black"/>
+    </svg>