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.
Deal with less compatibity stress because Socially Iconic doesn't use Javascript.
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
si si-bordered si-slideout
si si-bordered si-stacked si-slideout
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 <head></head>
<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 iconic-
.
Each icon is also accompanied by a label. Labels are not required and are hidden by default. The labels will only show when si-showlabel
or si-slideout
styles are used.
Example:
<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>