Ink uses Font Awesome, an icon webfont containing over 200 cool pictograms for use in your projects.
Due to Font Awesome's awesomeness and open licensing we opted to distribute it with Ink, instead of re-inventing the wheel. You'll find this webfont covers all your pictogram needs and then some.
To add any of the icons to your project (icon list below), simply create an <i>
element with the appropriate class.
For example, to add a mail icon next to your contact information like so:
me@me.com, simply use:
Code
<i class="icon-envelope"></i> <a href="mailto:me@me.com">me@me.com</a>
Because Font Awesome is a webfont, the icon size follows the font size of your parent element,
but if you need a larger icon, add the .icon-large
class to your <i>
element,
along with the specific icon class. This will give you an icon that's 33% larger than the assigned font size. For example:
Example
Code
<h4><i class="icon-heart icon-large"></i> We love Ink</h4>
If you want to see some more examples, you can hop over to Font Awesome's example page.
We'd like to leave a special thanks to the guys who made Font Awesome and decided to make it available under the SIL Open Font License, with code under MIT, and pictograms under CC BY 3.0, allowing projects like Ink to share its awesomeness.
Check out their web site at http://fortawesome.github.com/Font-Awesome