Super simple to use, CSS-only icons
A demo of littlebox icons in use.
Step 1: Install littlebox through Bower or download littlebox and reference it in your project (along with Bootstrap, if not already initialized):
bower install littlebox
or
<link rel="stylesheet" type="text/css" href="lib/littlebox.min.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css" />
<div class="lb-icon lb-*"></div>
Each littlebox icon is made up of three or fewer elements, but can be called with as a single element with class .lb-icon followed by the .lb-* class associated with the requested icon.
Each littlebox icon is built using borders, so an icon's color (or even individual elements within an icon) can be styled in your CSS:
.lb-*, .lb-*::before, .lb::after {
border-color: /*YOUR COLOR HERE*/
}
Compatibility is still being reviewed.
Suggestions, feedback and contributions to the icon library or compatibility would be greatly appreciated.
- Make icons scalable with EM units
- Clean up jagged Firefox edges by setting transparent borders to 'inset'
- Compatibility testing
- Add to icon library
- Improve animation compatibility
- Make usable as button groups and input addons