This is a littlebox icon

It's made entirely with CSS


Here's how littlebox icons work


A first element of the icon is set by styling .lb-camera in CSS.


A second element of the icon is set by styling .lb-camera::before in CSS.


The final element of the icon is set by styling .lb-camera::after in CSS.

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.

It's easy to include a littlebox icon in your project:

Step 1: Install littlebox through Bower or download the littlebox CSS files and initialize the plugin in your project (as well as 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" />
    Compatibility for littlebox icons is still being tested. See the details on GitHub.
Step 2: Add a littlebox icon to your project. The same structure is used for any littlebox icon:

<div class="lb-icon lb-*"></div>

The littlebox icon set:

(If it has a orange dot, it scales by adding class .lb-*-lg or .lb-*-sm)










Flag icons













Payment icons


Setting colors is simple:

All littlebox icons are built as borders, to set your own color, simply set the icons border color in your CSS, like so:

.lb-*, .lb-*::before .lb-*::after {
     border-color: /*YOUR COLOR HERE*/
}
OR
Use a preset color by adding an lb-*color* class to the littlebox icon.


If you like these littlebox icons, have feedback, have questions or want to see a particular littlebox icon made, please let me know.

Cabell MadduxHi, I'm Cabell. I started this project.

© Cabell Maddux, 2015