Skip to content

Instantly share code, notes, and snippets.

@twosixcode twosixcode/icon.css
Created Sep 27, 2012

Embed
What would you like to do?
Clean way to add icon font using :before pseudoclass
/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before,
[class*=" icon-"]:before,
[class^="icon-"]:after,
[class*=" icon-"]:after {
font-family: 'Pictos';
font-style: normal;
speak: none;
}
.icon-comment:before {
content: "\77";
}
/* CREDIT: http://icomoon.io/#toHome */
<!-- So on a comments link for example, instead of having something that looked like: -->
<a href="#comments"><span class="icon">w</span> Comments</a>
<!-- We could instead do a much cleaner: -->
<a href="#comments" class="icon-comments">Comments</a>
<!-- This automatically adds a "w", using the unicode character number, before anything with a class of .icon-comment. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.