CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

G16framework icon library used icomoon icon set to display icons in html elements.

There are wide varieties of options available to help tweak the way icon is presented in the browser, properties such as color, font size, box model dependency (padding, margin, and border), animation (transitional effect), and hover size. Check the utility plugin to see more available options that can extend the property of any selected icon.

Displaying Icon in html

Basic Icon

 
    <p>
        <span class="icon icon-home"></span> 
        <span class="icon icon-cogs"></span> 
        <span class="icon icon-share"></span>
        <span class="icon icon-search"></span> 
        <span class="icon icon-android"></span> 
        <span class="icon icon-address-book"></span>
        <span class="icon icon-deviantart"></span> 
        <span class="icon icon-attachment"></span> 
        <span class="icon icon-box-add"></span>
    </p>

Increasing Icon Size

To change the size, you assign a size class, a utility plugin extension that is responsible for relevant change in html properties.

Font Size classes Definition
Size class that alters the original size of typeface.
xxsmall 10px
xsmall 12px
small 14px
normal 16px
medium 32px
large 64px
xlarge 72px
xxlarge 96px
jumbo 160px

Change icon font size

Medium size

 
    <p>
        <span class="icon icon-home medium"></span> 
        <span class="icon icon-cogs medium"></span> 
        <span class="icon icon-share medium"></span>
        <span class="icon icon-search medium"></span> 
        <span class="icon icon-android medium"></span> 
        <span class="icon icon-address-book medium"></span>
        <span class="icon icon-deviantart medium"></span> 
        <span class="icon icon-attachment medium"></span> 
        <span class="icon icon-box-add medium"></span>
    </p>

Large size

 
     <p>
        <span class="icon icon-home large"></span> 
        <span class="icon icon-cogs large"></span> 
        <span class="icon icon-share large"></span>
        <span class="icon icon-search large"></span> 
        <span class="icon icon-android large"></span> 
        <span class="icon icon-address-book large"></span>
        <span class="icon icon-deviantart large"></span> 
        <span class="icon icon-attachment large"></span> 
        <span class="icon icon-box-add large"></span>
    </p>

Changing Icon color

Icon foreground and background color can be changed by calling the color class.

 
    <p>
        <span class="icon icon-home medium color-text-orangePeel"></span> 
        <span class="icon icon-cogs medium color-text-orangePeel"></span> 
        <span class="icon icon-share medium color-text-orangePeel"></span>
        <span class="icon icon-search medium color-text-orangePeel"></span> 
        <span class="icon icon-android medium color-text-orangePeel"></span> 
        <span class="icon icon-address-book medium color-text-orangePeel"></span>
        <span class="icon icon-deviantart medium color-text-orangePeel "></span> 
        <span class="icon icon-attachment medium color-text-orangePeel"></span> 
        <span class="icon icon-box-add medium color-text-orangePeel"></span>
    </p>

Apply foreground and background simultaneously with color-set class

 
    <p class="medium">
        <span class="icon icon-home color-set-alizarinCrimson padding-all-xsm"></span> 
        <span class="icon icon-cogs color-set-abbey padding-all-xsm"></span> 
        <span class="icon icon-share color-set-almond padding-all-xsm"></span>
        <span class="icon icon-search color-set-bahamaBlue padding-all-xsm"></span> 
        <span class="icon icon-android color-set-balticSea padding-all-xsm"></span> 
        <span class="icon icon-address-book color-set-cinnabar padding-all-xsm"></span>
        <span class="icon icon-deviantart color-set-atomicTangerine padding-all-xsm"></span> 
        <span class="icon icon-attachment color-set-brickRed padding-all-xsm"></span> 
        <span class="icon icon-box-add color-set-barleyCorn padding-all-xsm"></span>
    </p>

Icon as a button

Icon can be displayed as a button in conjuction with button class.

 
    <p>
        <button type="button" class="button icon icon-cart color-set-alizarinCrimson"></button>
        <button type="button" class="button icon icon-share2 color-set-alizarinCrimson"></button>
        <button type="button" class="button icon icon-heart color-set-alizarinCrimson"></button>
        <button type="button" class="button icon icon-headphones color-set-alizarinCrimson"></button>
    </p>

Icon as a link

Displaying icon as an inline hypertext link.

shopping cart

 
    <p>
      <a href="#link" class="button icon icon-cart color-set-orange"> 
         <span>shopping cart</span>
      </a>
    </p>

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.