Skip to content

Latest commit

 

History

History
42 lines (33 loc) · 1.27 KB

icon.md

File metadata and controls

42 lines (33 loc) · 1.27 KB

Icon

Adds an Icon to current element via ::before or ::after.
Automatically detects the used Icon-Set.


###Basic Usage

// Simple Implementation
@include icon();

// How to change the Icon Color?
@include icon($color: #fff);

// How to change the Icon?
@include icon($icon: 'fa-search');     // use fontawesome
@include icon($icon: 'ion-search');    // use ionicons
@include icon($icon: 'li-magnifier');  // use linearicons

// How to change the Icon font-size?
@include icon($font-size: 20px);  // or use presets: xs, s, m, l, xl, xxl

###All the Options

@include icon(
  $icon: 'fa-search',               // set css :after content, or set to 'false' for no icon
  $color: #fff,
  $font-size: 14px,                 // or use presets: xs, s, m, l, xl, xxl
  $position: 'after',               // before/after
  $margin: 0 10px 0 0,              // adds margin
  $padding: 5px,               		// adds padding
);


###Snippets The Snippets for Sublime Text are optional but make the workflow much faster.
Install: Download the Snippets and place them in your (path_to_sublime)/Packages/User folder.
Usage: Just type overlay and hit TAB to place your include.