Attach icons to anything with CSS

Thanks to CSS selectors it's possible to attach icons to anything you want just by adding an attribute of your choosing to your HTML. Want a popup icon? try <a href='#' icon='popup'> how about a magnifier? <a href='#' icon='mag'>. You can even add them automatically for file types. For e.g. to attach a pdf icon […]

Thanks to CSS selectors it's possible to attach icons to anything you want just by adding an attribute of your choosing to your HTML. Want a popup icon? try <a href='#' icon='popup'> how about a magnifier? <a href='#' icon='mag'>. You can even add them automatically for file types. For e.g. to attach a pdf icon to the right of any hyperlink who's URL ended in '.pdf' like:

a[href $='.pdf'] { 
   padding-right: 18px;
   background: transparent url(icon_pdf.gif) no-repeat center right;
}

Continue reading full article....

Askthecssguy

HTML, CSS, Selectors, Icons