Placing an icon ::before based on URI destination

[alexmccabe]

On a section of the site I am working on, there is the ability to download files. In the CSS icons relating to the file type are set to be shown ::before the filename. This works great in all cases (.pdf, .txt, .png etc…), except for .zip. The icon does not show. I’ve spent many an hour looking at this and I cannot figure it out.

Live Preview. You’ll notice in the bottom section labelled ‘Other’ the .zip files are without icons.

Code time

&[href$='.pdf']:before,
    &[href$='.txt']:before,
    &[href$='.doc']:before,
    &[href$='.rtf']:before,
    &[href$='.wps']:before,
    &[href$='.docx']:before,
    &[href$='.xls']:before,
    &[href$='.csv']:before,
    &[href$='.xlw']:before,
    &[href$='.xlt']:before,
    &[href$='.xlsx']:before,
    &[href$='.jpg']:before,
    &[href$='.jpeg']:before,
    &[href$='.gif']:before,
    &[href$='.png']:before,
    &[href$='.bmp']:before,
    &[href$='.tif']:before,
    &[href$='.zip']:before,
    &[href$='.rar']:before {
        content: "";
        display: inline-block;
        height: 20px;
        left: -20px;
        position: absolute;
        top: 0;
        width: 20px;
        z-index: 1;
    }
/* That could probably be done better? */

&[href$='.pdf']:before {
        background:transparent url(../img/icons/page_white_acrobat.png) center left no-repeat;
    }

    &[href$='.txt']:before {
        background:transparent url(../img/icons/page_white_text.png) center left no-repeat;
    }

    &[href$='.doc']:before,
    &[href$='.rtf']:before,
    &[href$='.wps']:before,
    &[href$='.docx']:before {
        background:transparent url(../img/icons/page_white_word.png) center left no-repeat;
    }

    &[href$='.zip']::before
    &[href$='.rar']::before {
        background:transparent url(../img/icons/page_white_zip.png) center left no-repeat;
    }

So as you can see, the code for the .zip is the same, but the icon just isn’t showing. The icon is on the server…

[Paulie_D]

On the live link I’m not seeing an icons folder at all.

[Paulie_D]

Hmmm…the pdf icon is working so there should be no reason why the other(s) shouldn’t.

Wait…is there a missing comma there…

&[href$='.zip']::before    <==== HERE ?
&[href$='.rar']::before {
        background:transparent url(../img/icons/page_white_zip.png) center left no-repeat;
    }

[Author]

Posts