Removing mime type icon from image using CSS, possible?

Question

I'm currently using some CSS to append font-awesome icons as mime types for uploaded files and or links that end in .pdf, .xls, .docx, etc.

I should have prefaced this entire post with this comment I made:

Ok, I should have mentioned that this is a WordPress site where users are able to upload and link images via the Media Uploader. Trying to automate this process so that (once delivered) the editor won't have to add HTML code to the visual editor. That being said, all WP images have a class assigned to them that's ".wp-image-*", would it be possible to use that WP class to filter the icons?

My CSS looks like this:

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

This solution works exactly as I want it to with one exception... it appends the mime type icon to images that LINK to a .pdf not just text links.

How to remove or not display the font-awesome icon on images only? That is the question. I have tried a number of different CSS solutions and have come up with either removing the entire image that is linked to the .pdf, or nothing at all.

Looking for some guidance here, would prefer the solution to be CSS but am open to whatever will work the best(php, js, jquery, etc).

HERES AN EXAMPLE:

(text link)

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

This works as expected.

This is the problem...

(image link below)

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

When the link wraps an image, it appends the font awesome icon to the image. How to stop the font awesome icon on images wrapped in links only?

My page code looks like this (not verbatim), also, using BootStrap Library:

<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

To solve it with the existing markup you'll need a parent selector, and those does not exist (yet).

A workaround could be to wrap the text in the text only links with a span and update the CSS rule with the :not(img) selector

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>

Or add a data-* attribute on the links that contain an 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>

If you can't change markup, here is a script sample

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>