fix: icons usage

Author: blackheaven

public/js/communityEvents.html

@@ -16,7 +16,7 @@
       </p>
       <p class="title is-5">
         {{#if hasUrl}}
-          <a href="{{url}}" target="_blank">{{ title }} <span class="fa fa-external-link" title="Lien vers l'événement dans Google Calendar"></span></a>
+          <a href="{{url}}" target="_blank" title="Lien vers l'événement dans Google Calendar">{{ title }} <span class="icon is-medium"><i class="fa fa-exsternal-link fa-lg"</i></span></a>
         {{else}}
           {{ title }}
         {{/if}}

src/layouts/Layout.astro

@@ -99,19 +99,19 @@ interface Props {
           </div>
           <div class="navbar-end">
             <a class="navbar-item" href="https://slack.lyontechhub.org/" title="Salle Slack">
-              <span class="icon"><i class="fab fa-slack fa-2x"></i></span>
+              <span class="icon is-medium"><i class="fab fa-slack fa-lg"></i></span>
             </a>
             <a class="navbar-item" href="mailto:[email protected]" title="Mail de contact">
-              <span class="icon"><i class="fa fa-envelope fa-2x"></i></span>
+              <span class="icon is-medium"><i class="fa fa-envelope fa-lg"></i></span>
             </a>
             <a class="navbar-item" href="https://groups.google.com/forum/#!forum/lyontechhub" title="Liste de discussion">
-              <span class="icon"><i class="fa fa-comments fa-2x"></i></span>
+              <span class="icon is-medium"><i class="fa fa-comments fa-lg"></i></span>
             </a>
             <a class="navbar-item" href="https://x.com/lyontechhub" title="X">
-              <span class="icon"><i class="fab fa-twitter fa-2x"></i></span>
+              <span class="icon is-medium"><i class="fab fa-twitter fa-lg"></i></span>
             </a>
             <a class="navbar-item" href="https://github.com/lyontechhub" title="GitHub">
-              <span class="icon"><i class="fab fa-github fa-2x"></i></span>
+              <span class="icon is-medium"><i class="fab fa-github fa-lg"></i></span>
             </a>
           </div>
         </div>

src/pages/calendar.astro

@@ -20,10 +20,14 @@ import Layout from '../layouts/Layout.astro';
             <nav class="navbar is-justify-content-center">
               <button type="button" class="button is-default nav-item" id ="calendarToday">Today</button>
               <button type="button" class="button is-default nav-item" id ="calendarPrevious">
-                <i class="fa fa-chevron-left"></i>
+                <span class="icon is-medium">
+                  <i class="fa fa-chevron-left fa-lg"></i>
+                </span>
               </button>
               <button type="button" class="button is-default nav-item" id ="calendarNext">
-                <i class="fa fa-chevron-right"></i>
+                <span class="icon is-medium">
+                  <i class="fa fa-chevron-right fa-lg"></i>
+                </span>
               </button>
             </nav>
             <div id="calendar"></div>

src/pages/community/[key].astro

@@ -43,7 +43,11 @@ const { community } = Astro.props;
                     {community.socialLinks
                         .map(
                             (socialLink) => (
-                            <a href={socialLink.url} target="_blank" class={"m-2 fa-2x " + socialLink.icon} title={socialLink.tooltip}></a>
+                            <a href={socialLink.url} target="_blank" title={socialLink.tooltip}>
+                              <span class="icon is-large">
+                                <i class={"fa-2x " + socialLink.icon}></i>
+                              </span>
+                            </a>
                             )
                         )
                     }