Material Icons

index.css

@@ -52,16 +52,10 @@ body {
     margin: 2rem;
     border: 1px solid transparent;
     height: 15rem;
-    background-color: var(--link-background);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
-.links-container .link-box img {
-    width: 10rem;
-    height: 10rem;
-    filter: drop-shadow(2px 2px 5px var(--logo-shadow));
-}
 .links-container .link-box a {
     display: flex;
     flex-direction: column;
@@ -70,7 +64,7 @@ body {
     text-decoration: none;
 }
 .links-container .link-box p {
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Balsamiq Sans', cursive;
     text-align: center;
     font-size: 2rem;
     letter-spacing: 1.5px;
@@ -96,6 +90,17 @@ body {
     padding: 1rem 2rem;
 }
 
+.links-container .link-box .material-icons {
+    font-size: 10rem;
+    color: var(--link-color);
+    transition: all ease-in-out 0.3s;
+}
+
+.links-container .link-box:hover .material-icons {
+    font-size: 7.5rem;
+    margin-bottom: 1rem;
+}
+
 @media only screen and (max-width: 768px) {
     .links-container .link-box{
         border-color: var(--link-accent);

index.html

@@ -2,6 +2,10 @@
 <html>
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <link rel="shortcut icon" type="image/icon" href="favicon.ico"/>
         <link rel="stylesheet" type="text/css" href="index.css" />
         <title>NASA.Family</title>
@@ -10,37 +14,43 @@
         <div class="links-container">
             <div class="link-box">
                 <a href="https://admin.nasa.family">
-                    <img src="./admin.png" />
+                    <span class="material-icons">settings</span>
+
                     <p>ADMIN</p>
                 </a>
             </div>
             <div class="link-box">
                 <a href="https://docker.nasa.family">
-                    <img src="./docker.png" />
+                    <span class="material-icons">memory</span>
+
                     <p>DOCKER</p>
                 </a>
             </div>
             <div class="link-box">
                 <a href="https://drive.nasa.family">
-                    <img src="./drive.png" />
+                    <span class="material-icons">add_to_drive</span>
+
                     <p>DRIVE</p>
                 </a>
             </div>
             <div class="link-box">
                 <a href="https://git.nasa.family">
-                    <img src="./git.png" />
+                    <span class="material-icons">code</span>
+
                     <p>GIT</p>
                 </a>
             </div>
             <div class="link-box">
                 <a href="https://proxy.nasa.family">
-                    <img src="./proxy.png" />
+                    <span class="material-icons">dynamic_form</span>
+
                     <p>PROXY</p>
                 </a>
             </div>
             <div class="link-box">
                 <a href="https://torrent.nasa.family">
-                    <img src="./torrent.png" />
+                    <span class="material-icons">downloading</span>
+
                     <p>TORRENT</p>
                 </a>
             </div>