Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Placing an icon ::before based on URI destination

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #147041
    alexmccabe
    Participant

    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…

    #147043
    Paulie_D
    Member

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

    #147046
    Paulie_D
    Member

    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;
        }
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.