siamak / licon

Lightness and Useful icons with Pure CSS3

Licon

Overview

Licon is a simple, useful and lightness pack—icon that made with Pure CSS3 by Siamak Mokhtari at FictionTeam in Tehran, Iran. It has both SCSS and LESS versions so it can easily be modified and merged into modern projects. It provides all the useful icons for good design without adding any images or fonts. Also you can add effects of Animate.css on Licon. I hope that it's useful for your projects.

Install

You can install Licon with Bower and include to your projects:

Bower:

bower install licon

Syntax

You should set licon.scss || licon.less with your projects and compile it. include licon.css file into your projects:

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

Usage

Then You add .licon-* in HTML files. Also you can see licon's icons:

• i.licon-disc
• i.licon-reorder
• i.licon-lock
• i.licon-bag
• i.licon-mug
• i.licon-iphone
• i.licon-finder
• i.licon-trash
• i.licon-macbook
• i.licon-dollar
• i.licon-pound
• i.licon-euro
• i.licon-yen
• i.licon-check
• i.licon-remove
• i.licon-plus
• i.licon-magnifier
• i.licon-info
• i.licon-mail
• i.licon-link
• i.licon-tv
• i.licon-clock
• i.licon-user
• i.licon-book
• i.licon-paper
• i.licon-arrowup
• i.licon-arrowdown
• i.licon-arrowleft
• i.licon-arrowright
• i.licon-battery
• i.licon-sun
• i.licon-certificate
• i.licon-imac
• i.licon-power
• i.licon-heart
• i.licon-infinity
• i.licon-flag
• i.licon-file
• i.licon-folder
• i.licon-pin
• i.licon-smile
• i.licon-eye
• i.licon-sliders
• i.licon-share
• i.licon-sync
• i.licon-reset

License

Created by Siamak Mokhtari — June, 2014.

Licensed under MIT.

licon's Issues

Browser support

This is just a doc suggestion. Although CSS3 is not supported in older browsers, esp. IE, it is more clear to starters if you can mention the Browser support. Or, the least you can do is to point some links to caniuse.com

Thanks.

Make scalable via font-size and em units?

The generated CSS code uses px values for dimensions like width, height, borders, etc. If em values were used instead, it would be possible to adjust the icon size dynamically be setting font-size, e.g. font-size: 120% on the <i> element to make the icons slightly larger, etc.

Add component support

It'd be useful if you added a component.json file for integrating with component

Retina ArrowUp & ArrowDown

Hello,

Take a look to thoses screenshots : the icons ArrowUp & ArrowDown are looking strange on my Retina MBP. (It does not affect ArrowLeft & ArrowRight.)

Here's the current code :

.licon-arrowup:before{
     left: 8px;
}
.licon-arrowdown:before{
     left: 8px;
}

Perhaps you'll need to target it only on retina devices.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     .licon-arrowup:before{
          left: 10px;
     }
     .licon-arrowdown:before{
          left: 10px;
     }
}

I don't use SASS, but here's an idea how to make this using LESS.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* i.licon-arrowup */
    .licon-arrowup{
        &:before{
            left: @size/4 + 2;
        }
    }

    /* i.licon-arrowdown */
    .licon-arrowdown{
        &:before{
            left: @size/4 + 2;
        }
    }
}

This is very strange because the :after has "right: 10px;", so left should be the same. How does it looks on normal screens ?
Have a nice day.