CSS

Identifier vos documents PDF, Word ou tout autres hyperlien à l’aide d’un pictogramme personnalisé Font Awesome. À l’époque en JavaScript, il fallait boucler tous les hyperliens de la page pour ajouter les pictogrammes. Aujourd’hui, il suffit de cibler les hyperliens à l’aide d’un sélecteur CSS.

Les pseudo-éléments ::before et ::after

Le pictogramme s’ajoute avant le lien en utilisant le pseudo élément ::before. Ainsi dans sa plus simple expression :

<style>
/* Ajouter une étoile devant tous les hyperliens */
a::before {
  ...
}
</style>

Vous aurez compris que pour ajouter le pictogramme après le lien, par exemple un lien externe, il suffit d’utiliser le pseudo élément ::after :

<style>
/* Ajouter une étoile après tous les hyperliens */
a::after {
   ...
}
</style>

Note : La syntaxe avec le CSS2 utilisait un seul deux-points :before. Alors que la version CSS3 utilise deux deux-points ::before

La propriété « content »

La propriété content: permet de générer le contenu d’un pseudo-élément ::before ou ::after.

a::before {
  content: "⍟";
}

Cibler les hyperliens avec le sélecteur

L’idée consiste à cibler l’extension de l’adresse (Url) dans l’hyperlien. Le code CSS suivant cible tout d’abord les hyperliens a mais aussi les adresses se terminant par .pdf. :

<style>
a[href$=".pdf"]::before {
  content: "⍟";
}
</style>

<a href="document.pdf">Ouvrir le document PDF</a>

Attention, le CSS est sensible à la case. Un serveur Apache aussi d’ailleurs. Alors une bonne pratique consiste à toujours utiliser des minuscules dans les hyperliens et les ancres.

Certaine adresse peuvent avoir un paramètre après l’extension, alors le sélecteur $ qui cible la fin de la chaine de caractère ne permet pas de le détecter. Dans ce cas, utiliser plutôt le sélecteur * qui permet de cibler tout ce qui contient la chaine de caractères.

<style>
a[href*=".pdf"]::before {
  content: "⍟";
}
</style>

<a href="document.pdf?version=2.0">Ouvrir le document PDF</a>

Et pour cibler tout ce qui débute par la chaine de caractères, par exemple une adresse qui débute par mailto:, utiliser le sélecteur ^.

<style>
a[href^="mailto:"]::before {
  content: "⍟";
}
</style>

$: Se terminant par la chaine de caractère ;
^: Débutant par la chaine de caractère ;
*: Qui contient la chaine de caractère.

Si le type de document a plusieurs extensions possibles, comme un document Word, utilisez deux sélecteurs séparés par une virgule :

<style>
  a[href$=".doc"]::before, a[href$=".docx"]::before {
   ...
  }
</style>

On veut parfois limiter la portée d’un sélecteur. Par exemple ajouter un pictogramme aux ancres, mais seulement dans le corps du document. Dans l’exemple suivant, je cible tous les hyperliens vers un une ancre, qui contient dans l’adresse le symbole « # » mais seulement contenu dans la balise main :

<style>
  main a[href*="#"]...
</style>

La pseudo-classe de négation, :not()

Si vous mélangez plusieurs pictogrammes ou encore si vous avez des liens dans une liste à puces ou bien simplement une classe qui retire les pictogrammes, ajoutez la pseudo-class not(). Cet exemple utilise la classe .sans-picto pour retirer le pictogramme :

<style>
  .sans-picto {
    list-style: none;
  }
  a[href*=".pdf"]:not(.sans-picto)...
</style>

Avec pictogramme Font Awesome

Charger la librairie Font Awesome :

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />

Pour ajouter le pictogramme, vous devez minimalement définir la largeur d’un bloc (20 pixels) et surtout spécifier la police de caractère « Font Awesome » :

<style>
  /* Instruction CSS de base pour tous les pictogrammes */
  a[href*=".pdf"]::before {
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    width: 20px;
    ...
  }
</style>

Et c’est le code Unicode qui permet d’identifier le pictogramme a ajouter au contenu. Précédé par le caractère d’échappement (c’est-à-dire la barre oblique \). Dans l’exemple suivant, le code Unicode \f1c2 qui représente le pictogramme « Document Word ».

<style>
  a[href$=".doc"]::before, a[href$=".docx"]::before {
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    width: 20px;
    content: "\f1c2"
  }
</style>

Exemple complet avec document PDF et Word

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
  <style>
    a[href$=".doc"]::before, a[href$=".docx"]::before {
      display: inline-block;
      font-family: "Font Awesome 5 Free";
      width: 20px;
      text-align: left;
      margin-left: .2em;
      content: "\f1c2";
    }
    a[href*=".pdf"]:not(.sans-picto)::before {
      display: inline-block;
      font-family: "Font Awesome 5 Free";
      width: 20px;
      text-align: left;
      margin-left: .2em;
      content: "\f1c1";
    }
  </style>
</head>
<body>
  <main>
    <p>
      <a href="document.pdf?v=1">
        Exemple de lien PDF
      </a>
      <br />
      <a href="document.doc">
        Exemple de lien Word
      </a>
    </p>
  </main>
</body>

Exemples

Code source

<!doctype html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Personnalisez vos hyperliens en CSS - Trucsweb.com</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
    <style>
      .sans-picto, .sans-puce {list-style: none;}
      a[href$=".html"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;font-weight: 900;content: "\f57d";}
      a[href$=".doc"]::before, a[href$=".docx"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c2";}
      a[href$=".xls"]::before, a[href$=".xlsx"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c3";}
      a[href$=".pps"]::before, a[href$=".pptx"]::before, a[href$=".ppt"]::before, a[href$=".pub"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c4";}
      a[href$=".rar"]::before, a[href$=".zip"]::before, a[href$=".zipx"]::before, a[href$=".tar"]::before, a[href$=".rar"]::before, a[href$=".gz"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c6";}
      a[href$=".txt"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f15c";}
      a[href$=".csv"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;font-weight: 900;content: "\f6dd";}
      a[href$=".vcf"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f007";}
      a[href$=".ics"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f073";}
      a[href*=".pdf"]:not(.sans-picto):before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c1";}
      a[href$=".flv"]::before, a[href$=".swf"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c8";}
      a[href$=".webm"]::before,a[href$=".ogv"]::before,a[href$=".mp4"]:not(.sans-picto):before, a[href$=".m4v"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c8";}
      a[href$=".mp3"]::before, a[href$=".wav"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c7";}
      a[href$=".ini"]::before, a[href$=".config"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c9";}
      a[href$=".png"]::before, a[href$=".jpg"]::before, a[href$=".svg"]::before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f1c5";}
      main a[href*="#"]:not(.sans-picto):before {display: inline-block;font-family: "Font Awesome 5 Free";width: 20px;content: "\f292";font-weight: 900;}
      a[href^="mailto:"]::before {display: inline-block;font-family: "Font Awesome 5 Free";font-weight: 900;width: 20px;content: "\f1fa";}
      a[href*="/vcards/"]:not(.sans-picto):before {display: inline-block;font-family: "Font Awesome 5 Free";font-weight: 900;width: 20px;content: "\f199";}
      a[href*="/nous_joindre/"]:not(.sans-picto):before {display: inline-block;font-family: "Font Awesome 5 Free";font-weight: 900;width: 20px;content: "\f674";}
      main a[target="_blank"]:not(.sans-picto):after {display: inline-block;font-family: "Font Awesome 5 Free";font-weight: 900;width: 20px;content: "\f35d";}
    </style>
  </head>

  <body>
    <head>
      <h1 class="sous-titre">Personnalisez vos hyperliens en CSS</h1>
    </head>
    <main>
      <h2 class="sous-titre">Exemples</h2>
      <p>
        <a href="#ancre">Exemple de lien d’ancrage</a><br /><br />
        <a href="document.pdf?v=1">Exemple de lien PDF</a><br /><br />
        <a href="document.doc">Exemple de lien Word</a><br /><br />
        <a href="document.xls">Exemple de lien Excel</a><br /><br />
        <a href="document.pps">Exemple de lien PowerPoint</a><br /><br />
        <a href="document.rar">Exemple de lien archive</a><br /><br />
        <a href="document.txt">Exemple de lien texte</a><br /><br />
        <a href="document.csv">Exemple de lien CSV</a><br /><br />
        <a href="document.html">Exemple de lien web</a><br /><br />
        <a href="document.ics">Exemple de lien calendrier (ics)</a><br />
        <a href="document.vcf">Exemple de lien carte virtuelle (vCard)</a><br />
        <a href="document.png">Exemple de lien Image</a><br /><br />
        <a href="document.mp4">Exemple de lien Vidéo</a><br /><br />
        <a href="document.mp3">Exemple de lien Audio</a><br /><br />
        <a href="mailto:adresse@domaine.com">Exemple de lien mailto</a><br />
        <a href="/nous_joindre/">Exemple vers une page précise</a><br />
        <a href="http://trucsweb.com" target="_blank">Exemple de lien externe</a><br />
      </p>
      <h2>Exemples dans une liste à puce</h2>
      <ul class="sans-puce">
        <li><a href="document.doc">Exemple de lien Word</a></li>
        <li><a href="document.pdf?v=1">Exemple de lien PDF</a></li>
      </ul>
      <h2>Exemple en retirant le pictogramme</h2>
      <p><a href="document.pdf?v=1" class="sans-picto">Exemple de lien PDF sans picto</a></p>
    </main>
  </body>
</html>

Font Awesome 5 et 6 (mise à jour 2021-12-20)

La librairie Font Awesome 5 et 6, que ce soit les fichiers CSS ou le JavaScript pour déclarer ces pictogrammes en format SVG change quelque peut la manière de programmer les pictogrammes. Il y a a maintenant plusieurs fichier :

all.css / all.js) : Tous les pictogrammes;
brands.css / brands.js) : Seulement les pictogrammess des marques (ex: Facebook);
solid.css / solid.js : Les pictogrammes plein ou gras (font-weight:900).
regular.css / regular.js : Les pictogrammes avec ligne ou contour (version Pro seulement);
light.css / light.js : Les pictogrammes léger (version Pro seulement).

Changez la famille de polices en fonction du type d’icône que vous souhaitez afficher. Par exemple le pictogramme de Facebook est dans la librairie « brands ». N’aesayez pas de l’utiliser avec la police « Font Awesome 5 Free » le mauvais pictogramme s’affichera. Utilisez plutôt « Font Awesome 5 Brands » :

...
font-family: "Font Awesome 5 Brands";
...

Même chose pour la version régulière ou solide, un seul caractère, mais deux librairies :

.picto_add_regulier::before {
  ...
  font-family: "Font Awesome 5 Regular";
  content: "\f2bb";
}

.picto_add_solide::before {
  ...
  font-family: "Font Awesome 5 Solid";
  content: "\f2bb";
}

Utilisation du format SVG avec chargement JavaScript asynchrone (ex: all.js)

L’utilisation de JavaScript pour charger les icônes SVG fournit un mécanisme non bloquant pour afficher les icônes sur une page. Si vous souhaitez un contrôle plus précis sur l’apparence des icônes, vous pouvez utiliser CSS et nos événements de chargement.

Bien que le chargement asynchrone des icônes permette à la page de s’afficher plus tôt, il peut également modifier la mise en page.

Vous pouvez éviter le chargement et le déplacement des icônes dans votre mise en page ou votre texte en tirant parti de certaines classes ajoutées à la balise dans le cadre des opérations de chargement effectuées par le moteur JavaScript.

Utiliser le format SVG a plusieurs avantages, comme la manipulation, la combinaison et l’animation des pictogrammes. Le format SVG est plus performant dans une page Web, mais il y a aussi des désavantages. Ils sont un peu plus lourds que le format police de caractères. Il faut les styliser (couleur, grandeur)... Tout dépend de vos besoins. Pour en savoir davantage, lire « Web Fonts vs SVG. Which One Should You Use? Well, It Depends par Rob Madole ».

Côté programmation des pseudo-éléments, même si tout reste sensiblement le même CSS, il y a une petite différence notable. Le pictogramme n’est plus affiché! En fait, le JavaScript utilisera les propriétés du pseudo-élément pour générer le SVG (contenu, famille de polices, poids de police, etc.) mais le pseudo-élément deviendra inutile, il faut le masquer! Il faut donc ajouter display:none sinon vous afficherez deux pictogrammes! un bon et un mauvais...

Donc, le style du pictogramme devra être défini dans l’élément lui-même, c’est à dire au SVG généré et non au pseudo-élément :

.monPicto:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f2bb";
  display: none;
  color: blue; /* ne fera rien */
}

/* Noter qu’il faut cibler le SVG généré de l’élément en question */
.monPicto svg {
  color: blue;
}

Références

CSS Selector Reference - W3Schools
Font Awesome
cdnjs - font-awesome
Web Fonts vs SVG. Which One Should You Use? Well, It Depends par Rob Madole

Trucsweb.com

Iconographie

CSS - Personnalisez vos hyperliens avec un pictogramme (icon)

Les pseudo-éléments ::before et ::after

La propriété « content »

Cibler les hyperliens avec le sélecteur

La pseudo-classe de négation, :not()

Avec pictogramme Font Awesome

Exemple complet avec document PDF et Word

Exemples

Code source

Font Awesome 5 et 6 (mise à jour 2021-12-20)

Utilisation du format SVG avec chargement JavaScript asynchrone (ex: all.js)

Références

Commentaires

En ligne depuis 25 ans (1997-2023)

RSS

Aider les Trucsweb

Iconographie - Trucsweb

Oznog

Connexion

Connexion

Mot de passe perdu

Connexion

Conditions générales

Conditions

Responsabilité

Droit applicable et juridiction compétente

Trucsweb

Glossaire

Trucsweb

Trucsweb

Conditions

Aucun message!

Créer un compte

Créer un compte

Trucsweb.com

CSS

Iconographie

CSS - Personnalisez vos hyperliens avec un pictogramme (icon)

Les pseudo-éléments ::before et ::after

La propriété « content »

Cibler les hyperliens avec le sélecteur

La pseudo-classe de négation, :not()

Avec pictogramme Font Awesome

Exemple complet avec document PDF et Word

Exemples

Exemples dans une liste à puce

Classe « sans-puce »

Exemple en retirant le pictogramme

Classe « sans-picto »

Code source

Font Awesome 5 et 6 (mise à jour 2021-12-20)

Utilisation du format SVG avec chargement JavaScript asynchrone (ex: all.js)

Références

Commentaires

En ligne depuis 25 ans (1997-2023)

RSS

Aider les Trucsweb

Iconographie - Trucsweb

Étiquettes

outils

Références

Oznog

Connexion

Connexion

Conditions

Responsabilité

Droit applicable et juridiction compétente

Conditions

Aucun message!

Créer un compte