fix misaligned icons

muckelba · Dec 1, 2023 · f559aed · f559aed
1 parent b5e3cdb
commit f559aed
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/lib/components/Faq.svelte b/src/lib/components/Faq.svelte
@@ -12,9 +12,13 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a class="card-header darker-bg" on:click={toggleFaq}>
     <p class="card-header-title title is-3 is-centered">
-      <i class="fa fa-angle-{faqHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+      <span class="icon is-large has-text-primary">
+        <i class="fa fa-angle-{faqHidden ? 'down' : 'up'}" />
+      </span>
       FAQ
-      <i class="fa fa-angle-{faqHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+      <span class="icon is-large has-text-primary">
+        <i class="fa fa-angle-{faqHidden ? 'down' : 'up'}" />
+      </span>
     </p>
   </a>
   <div class="card-content faq-content {faqHidden ? 'is-hidden' : ''} darker-bg">

diff --git a/src/lib/components/Tips.svelte b/src/lib/components/Tips.svelte
@@ -11,9 +11,13 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a class="card-header darker-bg" on:click={toggleHidden}>
     <p class="card-header-title title is-3 is-centered">
-      <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+      <span class="icon is-large has-text-primary">
+        <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'} " />
+      </span>
       Helpful tips to get better
-      <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+      <span class="icon is-large has-text-primary">
+        <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'}" />
+      </span>
     </p>
   </a>
   <div class="card-content {tipsHidden ? 'is-hidden' : ''} darker-bg">