Sign up for updates.

How to use Snipicons free set CSS

Installation

After extracting content from archive, simply copy "snipicons" folder, containing all SVG files and "snipicons.css" to your websites default directory and include in your project.

<link href="snipicons/snipicons.css" rel="stylesheet" type="text/css">

SVG icons and corresponding style sheets are located in the same directory to avoid long file paths and keep the CSS file at the minimum size.

Usage

Apply class "icon-" followed by glyph name to desired HTML element. Try to use semantically “neutral” html elements not to affect the semantic hierarchy of the page, for example <i> or <b> and not <em> or <strong>. Here are some examples of the code and the result.

<b class="icon-home"></b>will get you a or <i class="icon-anchor"></i> getting you .

Default size is set to 18 X 18, in addition there are seven more popular sizes 16, 24, 32, 48, 64, 96 and 128. To change the size, simply apply size class before the glyph class.<i class="icon32 icon-hourglass"></i>









The default style is the “regular” to change it, simply add the appropriate style affix <i class="icon48 icon-roller-hd"></i>


Regular icons
icon-roller

HD icons
icon-roller

Flat icons
icon-roller


Linear icons
icon-roller

Mono icons
icon-roller

Mini icons
icon-roller

Style sheet (CSS)

The style sheet contains all icons with all version, keep only ones you're using to keep the style sheet file size to the minimum.

// Override or define the all classes starting with icons-
[class^="icon-"], [class*=" icon-"] {
   display: inline-block;
   width: 16px;
   height: 16px;
   line-height: 20px;
   background-image: none!important; // removing background image ???
   } 
// Define custom icon sizes, we can have them as big as we want 
   .icon24 {height: 24px; width: 24px;}
   .icon32 {height: 32px; width: 32px;}
   .icon48 {height: 48px; width: 48px;}
   .icon64 {height: 64px; width: 64px;}
   .icon96 {height: 96px; width: 96px;}
   .icon128 {height: 128px; width: 128px;}
// SVG artwork is included as content of :before pseudo-element as background is not rendered sharply in Firefox
   .icon-volume-off:before {content: url(volume-off.svg)} 
  

License

This icons are licensed under the Creative Commons Attribution-NoDerivatives 4.0 International License. If you are using our free icons please attribute. Attributions help others to find our icons.

Copyright © 2017 - SnipIcons