Trucsweb.com

Trucsweb.com

CSS

Iconographie

RDFFav

CSS - Personnalisez vos hyperliens avec un pictogramme (icon)

Identifier vos documents PDF, Word ou tout autres hyperlien à l’aide d’un pictogramme personnalisé Font Awesome.iconCSS - Personnalisez vos hyperliens avec un pictogramme (icon)

Source : Getty images
Source : Getty images

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>

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

10/10 sur 1 revues.
       Visites : 802 - Pages vues : 877
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@