Add icons for the Learn links

ref #2337
galaxyproject · Jan 26, 2024 · 8515703 · 8515703
1 parent abcab08
commit 8515703
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/content/home/education.yml b/content/home/education.yml
@@ -5,32 +5,40 @@ content: From curated tools and workflows to self-paced tutorials available on t
 education:
 - title: Tutorials
   content: Access topic-based trainings for free.
+  icon: fas fa-graduation-cap
   url: https://training.galaxyproject.org
 
 - title: Videos
   content: Watch to learn, including conferences.
+  icon: fas fa-play
   url: https://www.youtube.com/channel/UCwoMMZPbz1L9AZzvIvrvqYA
 
 - title: Vetted workflows
   content: (Re)use or adapt quality workflows.
+  icon: fas fa-sitemap
   url: https://training.galaxyproject.org/training-material/workflows/list
 
 - title: Blog
   content: Read highlights from the experts.
+  icon: fas fa-blog
   url: /blog/
 
 - title: Data
   content: Pull data from popular repositories.
+  icon: fas fa-database
   url: https://training.galaxyproject.org/training-material/topics/admin/tutorials/data-library/tutorial.html
 
 - title: Community
   content: Explore the world-wide community.
+  icon: fas fa-users
   url: https://galaxyproject.org/community/
 
 - title: FAQ
   content: Common questions. Good answers.
+  icon: fas fa-question
   url: https://training.galaxyproject.org/training-material/faqs/index.html
 
 - title: Help & support
   content: Advice is always available.
+  icon: fas fa-medkit
   url: https://help.galaxyproject.org/
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
@@ -50,7 +50,10 @@
                                     class="icon fa far fa-arrow-circle-o-right iconXlarge pt-2"
                                     aria-hidden="true"
                                 ></span>
-                                <div class="title text-decoration">{{ education.title }}</div>
+                                <div class="title">
+                                    <span :class="['icon fa', education.icon]"></span>
+                                    <span class="pl-2 text-decoration">{{ education.title }}</span>
+                                </div>
                                 <div class="text text-decoration">{{ education.content }}</div>
                             </a>
                         </div>
@@ -257,6 +260,7 @@ query {
         education {
             title,
             content,
+            icon,
             url
         }
     }