Using colorizable multicolor icons on a website is alsmost as easy as using PNG of GIF images. After downloading the icons in the right format from Iconfu, they have to be placed inline into the website. The colors are set from an internal or external stylesheet. Below is a description of the steps involved when adding CSS colorizable SVGs to your website.
The icons must be exported as CSS colorizable SVG files, standard SVG files will not work. To do so select SVG as file type and tick the "Colorizable with CSS" checkbox in the download dialog. A more detailed explanation on downloading the icons as colorizable SVG files can be found here.
To make SVGs styleable with CSS, the SVG has to be "inline", which means it has to be part of the HTML document object model.
There are several ways to make an SVG inline, but for most cases we recommend SVG injection with our SVGInject library, which makes using inline SVGs almost as simple as using PNG or GIF images.
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
For more details and other methods of making SVGs inline take a look at Making SVGs Inline.
Colors are applied to CSS colorizable icons with simple CSS rules. Each rule applies one color, like in the following example:
.color-1 { color: #38ffad; }
.color-2 { color: #008b80; }
.color-3 { color: #ffffff; }
The number of colors depends on the color scheme used for the icons and, if an effect is applied, on the number
of colors used in the effect. The number of colors and the color names can be seen when opening the demo.html file that is included in the download of CSS colorizable icons.