Switch to FontAwesome Partially

ukriu · Apr 20, 2024 · 4d9a711 · 4d9a711
1 parent 3ca939b
commit 4d9a711
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -30,7 +30,8 @@
     <!-- External Script -->
 	<script src="https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js"></script>
     <!-- External CSS -->
-    <link rel="stylesheet" href="resources/styles.css" />
+    <link rel="stylesheet" href="resources/styles.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   </head>
   <body>
     <div class="background-container"></div>
@@ -43,37 +44,37 @@
         <img src="https://lanyard.cnrad.dev/api/586962558435590154?bg=transperent&borderRadius=unset&animated=true&idleMessage=Not%20doing%20anything%20right%20now!" alt="Discord Account Status" width="auto" height="auto" />
       </div>
       <br />
-      <div id="socialIcons">
-        <a href="https://discord.com/users/586962558435590154" title="Discord - @ukrio" target="_blank">
-          <iconify-icon icon="ic:baseline-discord"></iconify-icon>
+      <div id="Icons">
+        <a href="https://discord.com/users/586962558435590154" title="Discord - @ukrio" target="_blank">
+          <i class="fa-brands fa-discord"></i>
         </a>
-        <a href="https://github.com/ukrioo" title="GitHub - @ukrioo" target="_blank">
-          <iconify-icon icon="mdi:github"></iconify-icon>
+        <a href="https://github.com/ukrioo" title="GitHub - @ukrioo" target="_blank">
+          <i class="fa-brands fa-github"></i>
         </a>
         <a href="https://instagram.com/ukrioo" title="Instagram - @ukrioo" target="_blank">
-          <iconify-icon icon="mdi:instagram"></iconify-icon>
+          <i class="fa-brands fa-instagram"></i>
+        </a>
+        <a href="https://www.reddit.com/user/ukrio" title="Reddit - @ukrio" target="_blank">
+          <i class="fa-brands fa-reddit"></i>
         </a>
         <a href="https://anilist.co/user/ukrio/" title="Anilist.co - @ukrio" target="_blank">
           <iconify-icon icon="simple-icons:anilist"></iconify-icon>
         </a>
         <br />
         <a href="https://www.youtube.com/@ukrioo?sub_confirmation=1" title="YouTube - @ukrioo" target="_blank">
-          <iconify-icon icon="mdi:youtube"></iconify-icon>
-        </a>
-        <a href="https://www.reddit.com/user/ukrio" title="Reddit - @ukrio" target="_blank">
-          <iconify-icon icon="ic:baseline-reddit"></iconify-icon>
+          <i class="fa-brands fa-youtube"></i>
         </a>
         <a href="https://twitter.com/ukriooo" title="Twitter / 𝕏 - @ukrioo" target="_blank">
-          <iconify-icon icon="mingcute:twitter-fill"></iconify-icon>
+          <i class="fa-brands fa-x-twitter"></i>
         </a>
         <a href="https://open.spotify.com/user/5me8mcvucka8yo020z93jpc03" title="Spotify - @ukrio" target="_blank">
-          <iconify-icon icon="mdi:spotify"></iconify-icon>
+          <i class="fa-brands fa-spotify"></i>
         </a>
-        <a href="https://steamcommunity.com/id/ukrio/" title="Steam - @ukrio" target="_blank">
-          <iconify-icon icon="mdi:steam"></iconify-icon>
+        <a href="https://steamcommunity.com/id/ukrio/" title="Steam - @ukrio" target="_blank">
+          <i class="fa-brands fa-steam"></i>
         </a>
         <a href="https://www.twitch.tv/ukriooo" title="Twitch - @ukriooo" target="_blank">
-          <iconify-icon icon="ph:twitch-logo-bold"></iconify-icon>
+          <i class="fa-brands fa-twitch"></i>
         </a>
       </div>
     </div>

diff --git a/resources/styles.css b/resources/styles.css
@@ -64,21 +64,26 @@ body {
   pointer-events: none;
 }
 
-#socialIcons a {
+#Icons a {
   text-decoration: none;
   color: lavender;
-  font-size: 3em;
+}
+#Icons {
+  text-align: center;
+  align-items: center;
+  justify-content: center;
 }
 
-iconify-icon,
+iconify-icon, i,
 #lanyard-container {
   transition: transform 0.3s ease-in-out;
 }
 
-iconify-icon:hover {
+iconify-icon {margin: 5px 5px -4px 5px; font-size: 32px;}
+i {font-size: 32px;margin: 5px;}
+iconify-icon:hover, i:hover {
   transform: scale(1.2);
 }
-
 #lanyard-container:hover {
   transform: scale(1.07);
 }