second attempt to put custom icon in footer

virginiascarlett · virginiascarlett · commit febad1c3cc56 · 2025-12-04T08:59:08.000-08:00
diff --git a/_quarto.yml b/_quarto.yml
@@ -21,8 +21,8 @@ website:
         target: _blank
       - icon: envelope
         href: mailto:ospo@library.ucsb.edu
-      - icon: images/logo.svg
-        href: https://ucospo.net
+      - text: |
+        <a href="https://ucospo.net" target="_blank"><img src="images/logo.svg" class="custom-icon"></a>
 
 format:
   html:
diff --git a/custom.scss b/custom.scss
@@ -17,4 +17,13 @@ $footer-fg: #ffffff;
 }
 h2, .h2 {
   border-bottom: none;
+}
+.custom-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em; /* Align to the text baseline */
+    object-fit: contain; /* Ensure the image doesn't stretch if dimensions aren't square */
+    /* Add a filter to change the icon color
+       (Only works for SVGs or transparent PNGs) */
+    filter: brightness(0) invert(1);
 }

Original file line number	Diff line number	Diff line change
`@@ -17,4 +17,13 @@ $footer-fg: #ffffff;`
`17`	`17`	`}`
`18`	`18`	`h2, .h2 {`
`19`	`19`	`border-bottom: none;`
	`20`	`+}`
	`21`	`+.custom-icon {`
	`22`	`+ width: 1em;`
	`23`	`+ height: 1em;`
	`24`	`+ vertical-align: -0.125em; /* Align to the text baseline */`
	`25`	`+ object-fit: contain; /* Ensure the image doesn't stretch if dimensions aren't square */`
	`26`	`+ /* Add a filter to change the icon color`
	`27`	`+ (Only works for SVGs or transparent PNGs) */`
	`28`	`+ filter: brightness(0) invert(1);`
`20`	`29`	`}`