https://github.com/joe-watkins/icon-fonts-using-href-attribute-selectors

Instead of using classes or extra markup we leverage href attribute selectors
https://github.com/joe-watkins/icon-fonts-using-href-attribute-selectors

Last synced: 10 days ago
JSON representation

Instead of using classes or extra markup we leverage href attribute selectors

• Host: GitHub
• URL: https://github.com/joe-watkins/icon-fonts-using-href-attribute-selectors
• Owner: joe-watkins
• License: other
• Created: 2013-08-21T15:42:45.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-08-21T15:54:41.000Z (over 11 years ago)
• Last Synced: 2024-04-15T22:35:55.491Z (9 months ago)
• Language: CSS
• Size: 121 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: license.txt

Awesome Lists containing this project

README

        
#Icon Fonts using href attribute selectors.

Instead of using classes or extra markup we leverage href attribute selectors. In this example we are using a custom/bundled Icomoon icon font

## Demo

http://codepen.io/joe-watkins/full/wyehm

## Usage

Download in integrate the custom Icomoon web font into your project... then include the needed CSS. I've included the .scss file as well.

## html

	


	  


	    
I'm a .pdf

	    
I'm a .doc

	    
I'm a .zip

	    
I'm a .csv

	    
I'm a .ppt

	  

	


## CSS

	.icomoon-files a:before {

	  font-family: 'IcoMoonFiles';

	}

	.icomoon-files [href$=".pdf"]:before {

	  content: "\e008";

	  color: #dc0012;

	}

	.icomoon-files [href$=".doc"]:before {

	  content: "\e00a";

	  color: #24468d;

	}

	.icomoon-files [href$=".csv"]:before {

	  content: "\e00b";

	  color: #006e01;

	}

	.icomoon-files [href$=".zip"]:before {

	  content: '\e00c';

	  color: #ed7a0e;

	}

	.icomoon-files [href$=".ppt"]:before {

	  content: '\e00d';

	  color: #dc5900;

	}