Css de la navbar (2/3)


Ensuite, il faut retravailler les icônes dans la barre de navigation. Nous allons continuer dans app.css en mettant .navbar > a puis on ouvre les accolades. Les liens seront en display flex avec une direction en colonne, alignés verticalement et horizontalement au centre, un padding de 5 pixels, une marge en haut et en bas de 15 pixels et une couleur blanche.

.navbar > a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px;
margin-top: 15px;
margin-bottom: 15px;
color: #fff;
}
Concernant la couleur

Il se peut que color avec les icônes de https://tablericons.com/ ne fonctionne pas. Cela marche plutôt avec les icônes directement intégrées dans une police d'écriture tel que Material Icon.

Je n'ai découvert que plus tard dans mon tutoriel que color ne fonctionnait pas, ne vous en faîtes pas, nous allons corriger cela par la suite.

Si c'est le cas pour vous et que vous voulez corriger immédiatement, il y a deux solutions. La première solution est de supprimez color: #fff et rajoutez la déclaration suivante après la fermeture des accolades :

.navbar > a > svg {
stroke: #fff;
}

La seconde solution se trouve ici : Couleur du svg.

Voir la documentation de Mozilla.