More than 900 pure CSS3 icons!
Each icon uses a single anchor element (one div) and just one color: the currentColor
(and transparent) except for the colored icons (as the name suggests). Thus they can easily be included in a page with a single HTML element and use the current color and current font size.
currentColor
keyword in the CSS linear-gradient()
(it's a known bug since 2014!).
This will impact icons that use gradient background-image (just a few ones).Install iConicss using npm install iconicss
or download iconicss.min.css then add it in your html page:
<link rel="stylesheet" href="iconicss.min.css">
Using npm you can import 'iconicss/dist/iconicss.min.css'
or individual files such as import 'iconicss/css/github.css'
but you'll have to import 'iconics iconicss/icss.css
before.
Then just add icss-
classes to an <i>
elements to add a new icon on your page:
<i class="icss-home"></i>
You can change color of icons as simple as set color
in CSS.
<i class="icss-home" style="color:red;"></i>
You can change the size of the icon just by changing the font-size
in CSS
To animate the icon when changing just add the icss-anim
class to the element.
<i class="icss-anim icss-home"></i>
Then just change the icss-home
class to icss-github
to let the transition play.
If you want to fork, modify or create new icons, you can use the debug mode.
Just click on the button on top of the index.html
page to access a page with one css per icon. Thus the icon's css can be easealy accessed, modified and saved directly in your browser.
If you create a new icon, be sure to add a css with its name in the ./css
directory and add an entry in the config.json file of the project.
Individual css don't include prefixed methods: they are added using gulp-autoprefixer
when building the project.
To achieve the task it uses the gulp command.
To install Gulp, you must first download and install node.js. Then, from the command line:
npm install -g gulp
./iconicss
directory, then run npm install
. npm will look at the package.json file and automatically install the necessary local dependencies listed there.When completed, you'll be able to run the gulp
commands provided from the command line to create the distribution files in the ./dist
directory of the project.
Please use the GitHub issue tracker for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.
Copyright (c) 2017 Jean-Marc Viglino. Licensed under MIT Licence.