Socially Iconic is a set of commonly used social media icons that is built into a font. This font icons kit provides you a selection of simple and easy to use css styles that can easily integrate into a selection of templates and designs. Coded using LESS technology, you can easily customize the kit to take it ever further. It is lightweight and looks wonderful on retina devices.
In a single font, we include all custom built pictographyic social media icons.
LESS is more. Customize to your hearts content with simple less file.
Vector font + CSS means every icon and button looks great at any size.
All icons and buttons are vector and CSS based and looks great on high-res.
Designed and coded to work with all frameworks.
si si-rounded si-shadow si-lifted si-bg-white
Setting up Socially Iconic is very simple. To start, download or fork/pull the Github repo. Inside the download file, you will find all the contents that make up the Socially Iconic demo. Note: In the download file, you will also find the less and css files. If you want to edit the LESS file, you will need a compiler. No edit is needed if you prefer to use any styles and icons included in the demo.
Link Socially Iconic to your website using the following HTML inside of your
<link href="css/sociallyiconic.css" rel="stylesheet" media="all">
In this kit, all icons are displayed using the unordered list format. The class used inside of the
<ul> determines the style applied to all of the icons. The use of Socially Iconic is triggered with the
si class. To prevent conflict, all style classes are prepended by
si-. See below for the list of available style classes.
The definition for each specific icon and it's branding color is defined by the corresponding class. The branding color is defined inside of the
<a> tag where as the icon is defined with the
<i>. To prevent conflict, each icon classes are prepended with
Each icon is also accompanied by a label. Labels are not required and are hidden by default. The labels will only show when
si-slideout styles are used.
<ul class="si si-rounded si-bg-green"> <li><a href="#" class="facebook"><span><i class="iconic-facebook"></i></span><span class="si-label">Facebook</span></a></li> <li><a href="#" class="twitter"><span><i class="iconic-twitter"></i></span><span class="si-label">Twitter</span></a></li> <li><a href="#" class="google-plus"><span><i class="iconic-google-plus"></i></span><span class="si-label">Google+</span></a></li> <li><a href="#" class="linkedin"><span><i class="iconic-linkedin"></i></span><span class="si-label">LinkedIn</span></a></li> <li><a href="#" class="dribbble"><span><i class="iconic-dribbble"></i></span><span class="si-label">Dribbble</span></a></li> </ul>