Créer une barre d’icônes avec Flexbox et Font Awesome

Dans ce nouvel article de la série « CSS par la pratique », nous allons créer un widget contenant une série d’icônes de liens vers les réseaux sociaux telle que celle trouvée sur le site A Cup of Jo.

Cela nous conduira à aborder les concepts suivant :

  • Utilisation de Flexbox pour créer des boites mono-dimensionnelles
  • Intégration d’icônes de Font Awesome
  • Utilisation de @font-face pour spécifier une fonte
  • Utilisation du site Can I Use… pour vérifier la disponibilité des fonctionnalités dans les navigateurs
  • Conversion des fontes pour utiliser un format efficace

Utilisation de Font Awesome via un kit

Commençons dans un premier temps par se préoccuper des icônes elles-mêmes. Beaucoup de sources d’icônes existent sur le net, avec de multiples formats. Dans cet exemple, nous allons utiliser Font Awesome.

Tout comme pour Google Fonts, il existe plusieurs façons d’utiliser Font Awesome. Nous allons ici voir la plus simple, qui a cependant le mauvais goût de nécessiter une inscription (gratuite) au site.

Rendez-vous sur la page de démarrage de Font Awesome, et entrez votre adresse e-mail. Après avoir validé l’e-mail de confirmation, vous trouverez dans la page des kits un identifiant de kit, de la forme 48ze8304yt. Cliquez dessus pour finalement voir le code HTML à utiliser.

Celui-ci doit être inséré dans l’en-tête de la page HTML, au même niveau que les feuilles de style. N’oubliez pas de remplacer le XXXX par le l’identifiant de votre kit !

<!doctype html>

<html lang="fr">
  <head>
    <title>Barre d'icônes avec Font Awesome</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="https://kit.fontawesome.com/XXXX.js" crossorigin="anonymous"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  </body>
</html>

Ensuite, il faut rechercher sur le site de Font Awesome les icônes qui nous intéressent. Tapons donc “facebook” dans le pavé de recherche en haut de l’écran. Plusieurs icônes correspondantes s’affichent;.

On cliquera sur celle titrée “facebook-f” pour obtenir les détails.

Enfin, les détails d’utilisation sont indiqués en cliquant sur le bouton « Start using this icon ».

En haut de l’icône affichée en grand format se trouve le code de l’élément HTML à utiliser. Pour l’icône Facebook, ce sera :

<i class="fab fa-facebook-f"></i>

La première classe utilisée indique que c’est l’icône d’une marque (fab pour Font Awesome Brands). La deuxième classe identifie l’icône proprement dite, il est toujours préfixé par fa-.  

De façon similaire, l’icone de Twitter sera  

<i class="fab fa-twitter"></i>

Les icônes classiques auront elles pour première classe far (Font Awesome Regular). Par exemple, pour l’icône d’un cœur :

<i class="far fa-heart"></i>

Armés de ces connaissances, il est temps de nous lancer dans la création de notre liste d’icônes.

Création de la liste d’icônes

Insérons dans le corps (body) de notre document HTML notre liste contenant quatre icônes.

Nous utiliserons le bloc icons-list pour la liste, et l’élément icons-list__icone pour les liens.

<div class=”icons-list”>
  <a class=”icons-list__icon” href=”https://facebook.com”>
    <i class="fab fa-facebook-f"></i>
  </a>
  <a class=”icons-list__icon” href=”https://twitter.com”>
    <i class="fab fa-twitter"></i>
  </a>
  <a class=”icons-list__icon” href=”https://pinterest.com”>
    <i class="fab fa-pinterest"></i>
  </a>
  <a class=”icons-list__icon” href=”https://instagram.com”>
    <i class="fab fa-instagram"></i>
  </a>
</div>

Nous allons utiliser un peu de CSS pour supprimer les soulignement et passer les icônes en noir. De façon tout aussi classique, nous allons utiliser Flexbox pour le conteneur des liens. Enfin, nous utiliserons un peu de marge interne (padding) afin d’aérer la liste. 

.icons-list {
  display: flex;  
}

.icons-list__icon {
  padding: 0.2em 0.5em;

  color: black;
  font-size: 1.5em;
  text-decoration: none;
}

On notera aussi qu’augmenter la taille des icônes est aussi simple que pour du texte. Ici, on a utilisé l’unité em, qui a pour base la taille de la fonte du parent. On aura donc des icônes dont la taille sera 50% plus grande qu’un lien normal.

On va également ajouter une bordure à droite des icônes, sauf la dernière. Pour ce faire, on exclut la dernière icône grâce aux pseudo-classes, via :not(:last-child). Cela permet de sélectionner les éléments ayant la classe icons-list__icon, à l’exception du dernier enfant.

.icons-list__icon:not(:last-child) {
  border-right: 1px solid #999999;
}

Changement de couleur au survol

Sur le site de A Cup Of Jo, les icônes changent de couleur lorsqu’on passe le curseur de la souris dessus. Elles passent ainsi dans la couleur du réseau social correspondant.

Pour répliquer cet effet, il nous faut ajouter une classe différente à chacune de ces icônes. C’est une application parfaite pour les modificateurs de la méthode BEM; on va donc ajouter les classes icons-list__icon--facebook, icons-list__icon--twitter, etc…

<div class=”icons-list”>
  <a class=”icons-list__icon icons-list__icon--facebook” href=”https://facebook.com”>
    <i class="fab fa-facebook-f"></i>
  </a>
  <a class=”icons-list__icon icons-list__icon--twitter” href=”https://twitter.com”>
    <i class="fab fa-twitter"></i>
  </a>
  <a class=”icons-list__icon icons-list__icon--pinterest” href=”https://pinterest.com”>
    <i class="fab fa-pinterest"></i>
  </a>
  <a class=”icons-list__icon icons-list__icon--instagram” href=”https://instagram.com”>
    <i class="fab fa-instagram"></i>
  </a>
</div>

Le CSS correspondant est plutôt trivial. Il suffit d’utiliser la pseudo-classe :hover, qui est affectée aux éléments survolés.

Pour connaître les couleurs à utiliser, j’utilise le très utile Brand Palettes. Le logo d’Instagram étant multicolore, j’ai choisi une couleur arbitrairement.

.icons-list__icon--facebook:hover {
  color: #4267b2;
}

.icons-list__icon--twitter:hover {
  color: #1da1f2;
}

.icons-list__icon--pinterest:hover {
  color: #bd081c;
}

.icons-list__icon--instagram:hover {
  color: #dd2a7b;
}

Grâce à ce code CSS très simple, nous avons désormais l’effet attendu :

Téléchargement et utilisation d’une fonte

Nous avons déjà vu comment utiliser les fonts de Google Fonts. Ici, je vais présenter une autre façon de faire. Nous allons ainsi intégrer la fonte Bodoni.

Contrairement à l’utilisation de Google Fonts, cette façon de procéder va nous confronter à une certaine hétérogénéité des ressources. Certains sites proposent de télécharger chaque variante (italique, gras…) individuellement, d’autres fournissent des archives. De plus, les fichiers sont souvent nommés avec des conventions différentes, et les formats proposés diffèrent parfois. Rassurez-vous, il n’y a rien de compliqué, c’est juste un peu fastidieux parfois !

Une recherche de Bodoni sur Google présente de nombreux résultats. J’ai choisi de télécharger la version de Bodoni présente sur 1001 Free Fonts. On verra que cette fonte, bien que portant le même nom, diffère en fait de celle utilisée sur A cup of Jo.

L’archive contient quatre variantes : Roman (normale), italique, gras, gras et italique.

Dans un souci d’organisation, nous allons extraire ces fichiers dans un sous-répertoire fonts. Vous pouvez bien sûr choisir tout autre nom de répertoire, ou les mettre au même niveau que les fichiers HTML et CSS.

Ensuite, il faut ajouter déclarer les fontes via @font-face. Cela revient simplement à indiquer le ou les fichiers à utiliser pour chaque variante (famille, style, poids).

Concrètement, nous ajouterons les déclarations suivantes à notre feuille de style :

@font-face {
  font-family: "Bodoni";
  src: url("fonts/BodoniFLF-Roman.ttf") format("truetype");
}

@font-face {
  font-family: "Bodoni";
  font-style: italic;
  src: url("fonts/BodoniFLF-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Bodoni";
  font-weight: bold;
  src: url("fonts/BodoniFLF-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Bodoni";
  font-style: italic;
  font-weight: bold;
  src: url("BodoniFLF-BoldItalic.ttf") format("truetype");
}

Attention, cet ajout doit être effectué avant tous les styles existants, donc en haut du fichier CSS !

Ajoutons maintenant le titre et le lien « me contacter » au code HTML. Pour cela, on rajoute un nouveau div afin de centrer facilement le contenu horizontalement, et factoriser les changements.

<div class="social-networks">
  <h3 class="social-networks__title">Gardons le contact</h3>

  <div class="social-networks__icons icons-list">
  
  // code des quatre icônes identique au précédent
  
  <a class="social-networks__link" href="/contact">Me contacter</a>
</div>

Le CSS correspondant est assez classique. On commence par styler le bloc pour centrer les éléments et changer la fonte.

.social-networks {
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: Bodoni;
}

Comme souvent, il y a quelques ajustements à faire en terme de couleurs et d’espacement.

Les finitions sont, avouons-le, la partie la moins intéressante du développement CSS. ici, on va espacer ajouter un peu de marge entre les éléments, styler le lien et changer les couleurs des textes.

.social-networks > :not(:last-child) {
  margin-bottom: 1em;
}

.social-networks__title {
  margin-top: 0;

  color: #333333;
  text-transform: capitalize;
}

.social-networks__link {
  color: #e13d3d;
  font-style: italic;
  text-decoration: none;
  text-transform: lowercase;
}

Le résultat final est assez proche de l’original.

Si on était en train de développer une page complète, plusieurs itérations supplémentaires seraient nécessaires. Par exemple, on peut généraliser (et compléter) le style de la classe social-network en la transformant en une classe widget, qui serait alors utilisée pour tous les éléments de la barre de droite afin d’obtenir une apparence uniforme.

Nous ne sommes pas encore au bout de nos peines concernant les fontes. En effet, comme nous allons le voir, le format qu’on a téléchargé (TrueType, avec l’extension TTF) est loin d’être optimal.

Quels format(s) de fonte choisir ?

S’il existe une multitude de formats pour les fontes utilisables sur le web, la plupart d’entre eux n’ont plus vraiment de raison d’être. En effet, beaucoup d’entre eux ne sont pas compressés. C’est le cas des fichiers au format TrueType Fonts (extension .ttf) et OpenType Fonts (.otf).

À l’inverse, le format WOFF (Web Open Font Format) est conçu pour le web. Dans sa seconde itération (WOFF2), il peut être jusqu’à 50% plus compact que ses concurrents. Cela fait donc sacrément pencher la balance en sa faveur.

Il est de plus compatible avec 96% des navigateurs actuellement utilisés. L’utilisation de la version 1 vous permettra même d’atteindre une compatibilité avec 98% des versions installées !

Vous vous demandez probablement d’où je sors ces chiffres. Eh bien, ils proviennent de l’indispensable Can I Use…. Ce site permet de voir les fonctionnalités supportées par les différentes versions des navigateurs, et ainsi d’estimer le pourcentage des utilisateurs

Par exemple, la page Can I Use… sur le format Woff2 indique qu’à l’exception de IE et Opera Mini, tous les navigateurs supportent actuellement ce format. En terme de part de marché, ces navigateurs représentent 96% (en haut à droite de l’écran).

Il est aussi possible d’utiliser Can I Use… pour vérifier la disponibilité d’une propriété CSS donnée, ou d’une méthode Javascript.

Conversion des fontes

Beaucoup de sites existent pour convertir les fontes d’un format à l’autre. J’utiliserai ici Transfonter, qui a deux points forts :

  • Possibilité de convertir plusieurs variantes d’une fonte en même temps
  • Génération automatique d’une feuille de style contenant les @font-face

Il suffit de cliquer sur le bouton « Add fonts » pour choisir les fichiers à convertir. Les options par défaut sont en général adaptées, il n’y a donc pas besoin de les modifier. Ensuite, il suffit de cliquer sur « Convert » pour télécharger une archive au format ZIP.

Outre les fontes aux formats sélectionnés, celle-ci contient une feuille de style et un fichier HTML de démonstration.

Remplaçons donc les déclarations précédentes par celles-ci (elles sont quasiment identiques à celle de la feuille de style fournie dans l’archive, à l’exception principalement de la famille nommée Bodoni au lieu de BodoniFLF) :

@font-face {
  font-display: swap;
  font-family: "Bodoni";
  font-style: normal;
  font-weight: bold;
  src: url("fonts/BodoniFLF-Bold.woff2") format("woff2"),
    url("fonts/BodoniFLF-Bold.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Bodoni";
  font-style: italic;
  font-weight: 500;
  src: url("fonts/BodoniFLF-Italic.woff2") format("woff2"),
    url("fonts/BodoniFLF-Italic.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Bodoni";
  font-style: italic;
  font-weight: bold;
  src: url("fonts/BodoniFLF-BoldItalic.woff2") format("woff2"),
    url("fonts/BodoniFLF-BoldItalic.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: "Bodoni";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/BodoniFLF-Roman.woff2") format("woff2"),
    url("fonts/BodoniFLF-Roman.woff") format("woff");
}

Comme on peut le voir, il es possible d’indiquer un nombre arbitraire de fichiers dans chaque section @font-face. Leur ordre est important : le navigateur utilisera la première fonte avec laquelle il est compatible. Il faut donc lister d’abord les fontes les plus compactes, puis celles utilisées pour la compatibilité avec des navigateurs plus anciens.

Autre point remarquable, l’utilisation de l’attribut font-display avec une valeur swap. Nous reviendrons dessus plus en détail dans un article ultérieur; pour résumer de façon simple, il indique au navigateur d’afficher temporairement le contenu avec une autre fonte le temps que celle utilisée soit téléchargée. Sur une connexion lente, cela peut provoquer un changement visible appelé en anglais FOUT (flash of unstyled text).

S’il n’y a pas de différence visible avec cette nouvelle feuille de style, la quantité de données transférées pour la fonte est bien moindre.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *