Suppression de l'icône de type mime de l'image en utilisant CSS, possible?

Question

J'utilise actuellement un peu de CSS pour ajouter des icônes de police-awesome comme types MIME pour les fichiers téléchargés et des liens ou qui se terminent par .pdf, .xls, .docx, etc.

J'ai préfacé cet article entier avec ce commentaire j'ai fait:

Ok, j'aurais dû mentionner que c'est un site WordPress où les utilisateurs peuvent télécharger et lier des images via le Media Uploader. Essayer d'automatiser ce processus afin que (une fois livré) l'éditeur n'aura pas à ajouter de code HTML à l'éditeur visuel. Cela étant dit, toutes les images WP ont une classe qui leur est assignée ".wp-image- *", serait-il possible d'utiliser cette classe WP pour filtrer les icônes?

Mon CSS ressemble à ceci:

a[href$=".pdf"]::after { 
    font-family: "fontawesome"; 
    content: "\0020\f1c1"; 
    color: inherit; 
    font-weight: 400 
} 

Cette solution fonctionne exactement comme je le souhaite à une exception près ... il l'icône ajoute type MIME à images qui pointent vers .pdf non juste des liens de texte. Comment supprimer ou ne pas afficher l'icône font-awesome sur les images seulement? Telle est la question. J'ai essayé un certain nombre de solutions CSS différentes et j'ai trouvé soit la suppression de l'image entière liée au .pdf, soit rien du tout.

Vous cherchez un peu de conseils ici, préférerait la solution à CSS mais je suis ouvert à tout ce qui fonctionne le mieux (php, js, jquery, etc).

Voici un exemple:

(lien texte)

<a href="example.pdf">Example PDF</a> 

Cela fonctionne comme prévu.

C'est le problème ...

(lien image ci-dessous)

<a href="example.pdf"> 
    <img src="example.jpg" alt="example pdf" /> 
</a> 

Lorsque le lien enveloppe une image, il ajoute la police icône impressionnante à l'image. Comment arrêter l'icône impressionnante de police sur les images enveloppées dans des liens seulement?

Mon code page ressemble à ceci (pas in extenso), aussi, à l'aide BootStrap Bibliothèque:

<div class="container"> 
    <div id="main_content"> 
    <!-- Then there are the usual basic tags found in WordPress content such as <p><h1><blockquote> etc but the containing div is "main_content", no <div>'s before image --> 
    <p> 
     <a href="http://example-document.pdf"> 
     <img class="alignright size-medium wp-image-639 img-responsive" src="http://example-image.jpg" alt="Alt Title" srcset="http://example-image.jpg 232w, http://example-image.jpg 613w" sizes="(max-width: 232px) 100vw, 232px"> 
     </a> 
    </p> 
    </div> 
</div> 

Answer 1

Pour le résoudre avec le balisage existant, vous aurez besoin d'un sélecteur de parent, et ceux qui n'existe pas (encore).

Une solution pourrait consister à envelopper le texte dans le texte des liens uniquement avec un span et mettre à jour la règle CSS avec le sélecteur :not(img)

a[href$=".pdf"] :not(img)::after { 
 
    content: " X"; 
 
    color: red; 
 
    font-weight: 400 
 
}

<a href="example.pdf"><span>Example PDF</span></a> 
 
<br> 
 
<a href="example.pdf"> 
 
    <img src="http://placehold.it/100" alt="example pdf" /> 
 
</a>

Ou ajouter un attribut data-* sur les liens qui contiennent une image

a[href$=".pdf"]:not([data-hasimg])::after { 
 
    content: " X"; 
 
    color: red; 
 
    font-weight: 400 
 
}

<a href="example.pdf">Example PDF</a> 
 
<br> 
 
<a href="example.pdf" data-hasimg> 
 
    <img src="http://placehold.it/100" alt="example pdf" /> 
 
</a>

Si vous ne pouvez pas changer le balisage, voici un exemple de script

var links = document.querySelectorAll('a[href$=".pdf"]'); 
 
for (var i = 0; i < links.length; i++) { 
 
    if (links[i].children.length == 0) { 
 
    links[i].classList.add('icon'); 
 
    } 
 
}

a[href$=".pdf"].icon::after { 
 
    content: " X"; 
 
    color: red; 
 
    font-weight: 400 
 
}

<a href="example.pdf">Example PDF</a> 
 
<br> 
 
<a href="example.pdf"> 
 
    <img src="http://placehold.it/100" alt="example pdf" /> 
 
</a>

Answer 2

Placez votre texte dans une période et lui donner un nom de classe comme ceci:

a[href$=".pdf"] .text:after { 
    font-family: "fontawesome"; 
    content: "\0020\f1c1"; 
    color: inherit; 
    font-weight: 400 
} 


<a href="example.pdf"><span class="text">Example PDF</span></a> 

<a href="example.pdf"> 
    <img src="example.jpg" alt="example pdf" /> 
</a>