fixing svg positioning

DanielRedacted · Sep 17, 2024 · 5b2c160 · 5b2c160
1 parent 3da315e
commit 5b2c160
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/card.html b/card.html
@@ -154,14 +154,21 @@
         color:lightgray;
     }
     .row .icon {
-        position:absolute; height:100%; aspect-ratio:1/1; top:0; left:-22px; border-radius:50%; background-color:#444
+        position:absolute;
+        display:flex;
+        height:100%; 
+        aspect-ratio:1/1; 
+        top:0; left:-22px; 
+        border-radius:50%; 
+        background-color:#444;
+        padding:auto;
     }
-
-    svg {
+    .row .icon svg {
         width: 50%;
         height: auto;
         fill:white;
         stroke: white;
+        margin:auto
     }
     </style>
 </head>
@@ -221,17 +228,17 @@ <h1>Phone</h1>
                         const button = document.createElement('a');
                         button.href = contact.link;
 
+                        const icon = document.createElement('div');
                         if (contact.icon) {
                             // Fetch the SVG icon and insert it inline
                             const svgContent = await fetchSVG(contact.icon);
-                            const icon = document.createElement('div');
                             icon.innerHTML = svgContent; // Insert the SVG content
                             icon.classList.add("icon");
                             icon.src = contact.icon;
                             icon.alt = `${contact.contactType} icon`;
-                            button.appendChild(icon);
                         }
-
+                        button.appendChild(icon);
+
                         const name = document.createElement('h1')
                         name.textContent = contact.contactType;
                         button.appendChild(name);