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

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.