Use FontAwesome for backtotop icon (#629)

Some computers do not have the unicode fonts required to render ⮝
scientific-python · Jul 19, 2024 · 827e00a · 827e00a
1 parent d6cfcde
commit 827e00a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/assets/theme-css/backtotop.css b/assets/theme-css/backtotop.css
@@ -21,10 +21,11 @@
   background: #f39200;
 }
 #backtotop a {
+  display: flex;
+  align-items: center;
   outline: none;
   text-decoration: none;
   border: 0;
-  display: block;
   width: 46px;
   height: 46px;
   background-color: var(
@@ -35,20 +36,14 @@
   border-radius: 50%;
   text-align: center;
   font-size: 1.625rem;
+  color: var(--spht-color-light);
 }
-body #backtotop a {
-  outline: none;
-  color: var(--colorSecondary);
-}
-#backtotop a:after {
-  outline: none;
-  content: "⮝";
-  position: relative;
+
+#backtotop svg {
+  margin: 0 auto;
   display: block;
-  top: 50%;
-  -webkit-transform: translateY(-55%);
-  transform: translateY(-55%);
 }
+
 #backtotop.visible #backtotop-color:hover {
   background: var(--pst-color-link-hover);
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -33,7 +33,7 @@
     {{ end }}
 
     <!-- Back To Top Button -->
-    <div id="backtotop"><a href="#" id="backtotop-color"></a></div>
+    <div id="backtotop"><a href="#" id="backtotop-color"><i class="fa-solid fa-arrow-up"></i></a></div>
 
     {{ if .Site.Params.footer }}
     {{ partial "footer.html" . -}}