Member Avatar for Tko_1

Hello i am able to add icons next to files that end in these extentions, what im tring to do is to add icons next to directories. Any ideas ?
Thank you

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
background:transparent url(zip.jpg) center left no-repeat;
display:inline-block;
padding-left:40px;
line-height:18px;
}
  • 2 Contributors
  • 2 Replies
  • 99 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Tko_1

Dani AI

Generated

Quick summary and a couple of more robust options that follow on from ’s class suggestion and ’s quick fix.

Styling every anchor works (as discovered) but is broad. When directory links reliably end with a slash, a CSS attribute selector plus a pseudo-element gives a tidy, maintainable result and keeps the icon out of the HTML:

a[href$="/"]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 16px;
  background: url(folder.svg) center/contain no-repeat;
  margin-right: 8px;
  vertical-align: middle;
}

If server-side markup can be controlled (the route recommended), adding a class like class="dir" to directory links is the cleanest option. When server-side changes are impossible, a small client-side pass can add that class based on the href:

document.querySelectorAll('a[href]').forEach(function(a){
  if (a.getAttribute('href').slice(-1) === '/') a.classList.add('dir');
});

Notes and caveats: many servers redirect directory requests to a trailing slash, but some setups (rewrites, “pretty” URLs, index pages) won’t include it—so attribute selectors may miss links. Prefer SVG or icon fonts for crisp results on high-DPI displays and mark decorative icons as aria-hidden or provide accessible text if the icon conveys meaning.

References: CSS attribute selectors and ::before pseudo-element.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Do you have the ability to generate the HTML code where you can assign a class to those hyperlinks that point directly to directories? Then use a CSS class selector in a similar manner?

Member Avatar for Tko_1

o my gosh duhhhh... lol

    a {
    background:transparent url(folder.jpg) center left no-repeat;
    display:inline-block;
    padding-left:40px;
    line-height:18px;
    }

This worked thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.