[heading-anchor] Reworked heading anchors to use the font character

Added aria-hidden, because icon fonts don't work on screen readers

1 files changed, 2 insertions, 3 deletions

diff --git a/src/styles.css b/src/styles.css
index 9aa1a39..6563f8d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -136,7 +136,7 @@ img {
   .file-icon        { min-width: 1.3em; vertical-align: text-bottom; }
   .borderless, .oldschool-badge, .file-icon { border: none; }
 
-  .btn {
+  .btn, .h-anchor {
       /* Thanks https://stackoverflow.com/a/4407335/12036073 */
       -webkit-touch-callout: none; /* iOS Safari */
       -webkit-user-select: none; /* Safari */
@@ -196,8 +196,7 @@ h1, h2, h3, h4, h5, h6 {
   h2 { margin-top: 2.5em; }
   h3 { margin-top: 2em; }
 
-  .h-anchor { border: none !important; display: inline; }
-    .h-anchor img { border: none; height: 1.3em; vertical-align: text-bottom; }
+  .h-anchor { border: none; }
   .h-anchor img, .icon, .file-icon, .file-wrapper > summary {
       /* Since link images are made for dark mode, and have a white-ish
        * foreground, this filter makes them black (when in light mode)