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)
<div class="lb-icon lb-*"></div>
(mouse over an icon to see its class)
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 Maddux, 2015