#issue-16

public/font/icon.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2022 by original authors @ fontello.com</metadata>
+<defs>
+<font id="icon" horiz-adv-x="1000" >
+<font-face font-family="icon" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe800;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="user" unicode="&#xe801;" d="M714 69q0-60-35-104t-84-44h-476q-49 0-84 44t-35 104q0 48 5 90t17 85 33 73 52 50 76 19q73-72 174-72t175 72q42 0 75-19t52-50 33-73 18-85 4-90z m-143 495q0-88-62-151t-152-63-151 63-63 151 63 152 151 63 152-63 62-152z" horiz-adv-x="714.3" />
+
+<glyph glyph-name="search" unicode="&#xe802;" d="M643 386q0 103-73 176t-177 74-177-74-73-176 73-177 177-73 177 73 73 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 153-31 125-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="mail" unicode="&#xe803;" d="M929 11v428q-18-20-39-36-149-115-238-189-28-24-46-37t-48-28-57-13h-2q-26 0-57 13t-48 28-46 37q-88 74-238 189-21 16-39 36v-428q0-7 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 83-159 107-84 223-176 4-3 20-17t25-21 25-17 28-16 24-5h2q11 0 24 5t28 16 25 17 25 21 20 17q116 92 224 176 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" horiz-adv-x="1000" />
+
+<glyph glyph-name="link" unicode="&#xe804;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="spin" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
+
+<glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
+
+<glyph glyph-name="trash" unicode="&#xf1f8;" d="M286 82v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m143 0v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m142 0v393q0 8-5 13t-12 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q7 0 12 5t5 13z m-303 554h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q23 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
+</font>
+</defs>
+</svg>

sass/icons.scss

@@ -0,0 +1,6 @@
+.icon {
+  font-family: "icon";
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: inherit;
+}

sass/index.scss

@@ -34,6 +34,7 @@
 @import './toast';
 @import './flash';
 @import './pagination';
+@import './icons';
 
 @import './home';
 @import './connexion';

views/index.ejs

@@ -13,12 +13,7 @@
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
         <meta name="msapplication-TileColor" content="#da532c">
         <meta name="theme-color" content="#ffffff">
-
+        
-        <link
-            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
-            rel="stylesheet"
-        />
-    
         <link href="/css/main.css" rel="stylesheet" />
     
         <script src="/libs/axios/axios.min.js"></script>
@@ -79,7 +74,7 @@
                         <div class="buttons">
                             <a class="button is-link" href="/ajouter-un-album">
                                 <span class="icon">
-                                    <i class="fa-solid fa-plus"></i>
+                                    &#xe800;
                                 </span>
                                 <span>
                                     Ajouter un album
@@ -95,7 +90,7 @@
                     <div class="navbar-item has-dropdown">
                         <a class="navbar-link">
                             <span class="icon">
-                                <i class="fa-solid fa-user"></i>
+                                &#xe801;
                             </span>
                             <span>
                                 <%= user.username %>
@@ -162,9 +157,9 @@
 
         <footer class="footer layout-hero">
             <p>
-                <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>. 
+                <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon">&#xe804;</i></a>. 
                 Fait avec ❤ à Bordeaux.
-                Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>.
+                Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon">&#xe804;</i></a>.
             </p>
         </footer>
     </body>

views/pages/ajouter-un-album.ejs

@@ -6,7 +6,7 @@
                     <input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)" autofocus>
                     <button class="button is-link" :disabled="loading">
                         <span class="icon">
-                            <i class="fas fa-search"></i>
+                            &#xe802;
                         </span>
                     </button>
                 </div>

views/pages/home.ejs

@@ -9,7 +9,7 @@
     <p class="text-justify">
         <strong>My Music Library</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où.
         <br />
-        Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later</a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr</a>.
+        Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon">&#xe804;</i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MyMusicLibrary" target="_blank">git.darkou.fr <i class="icon">&#xe804;</i></a>.
     </p>
     <h2>
         Pourquoi utiliser My Music Library ?
@@ -25,9 +25,9 @@
     <p class="text-justify">
         <strong>My Music Library</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔).
         <ul>
-            <li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS</a>.</li>
+            <li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon">&#xe804;</i></a>.</li>
-            <li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL</a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB</a>.</li>
+            <li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL <i class="icon">&#xe804;</i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon">&#xe804;</i></a>.</li>
-            <li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss</a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS</a>.</li>
+            <li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon">&#xe804;</i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon">&#xe804;</i></a>.</li>
         </ul>
     </p>
 </main>

views/pages/mon-compte/ma-collection.ejs

@@ -40,7 +40,7 @@
         <span class="title">
             {{ item.artists_sort}} - {{ item.title }}
             <span class="icon" @click="showConfirmDelete(item._id)">
-                <i class="fa-solid fa-trash"></i>
+                &#xf1f8;
             </span>
         </span>
         <div class="grid grid-cols-2 md:grid-cols-4">