Installation
Copy the code and paste it before your </head> tag.
Save your template and enjoy!
Save your template and enjoy!
<script src="//pull.cappuccicons.com/cpf.js"></script>
Usage
HTML
<i class="cp cp-icon-name"></i>
Replace icon-name with the name of the icon you want to use. Don't remove the hyphens if the name has them.
Paste the code wherever you want the icon to appear in your template's HTML.
Paste the code wherever you want the icon to appear in your template's HTML.
CSS
your-class/id:before{
content:'icon-unicode';
font-family:'cappuccicons';
}
content:'icon-unicode';
font-family:'cappuccicons';
}
Replace yourclass/id with the selector you've chosen, along with its respective symbol (. for classes, # for IDs).
Replace icon-unicode with the unicode of the icon you want. These codes are the numbers below the icon previews on the list at the end of this page.
Important! Do not remove the ' surrounding the unicode.
You also need to have a corresponding HTML code in your template for this to take effect.
Replace icon-unicode with the unicode of the icon you want. These codes are the numbers below the icon previews on the list at the end of this page.
Important! Do not remove the ' surrounding the unicode.
You also need to have a corresponding HTML code in your template for this to take effect.
<div class/id="your-class/id"></div>
Choose whether you're using a class or an ID, and replace your-class/id with the selector you've chosen.
Customisation
HTML
.icon-name{
font-size: #;
color: #;
/* whichever other stylings you want */
}
font-size: #;
color: #;
/* whichever other stylings you want */
}
This method uses regular CSS for HTML styling.
Use this if you've inserted the icon(s) with the HTML method explained in the Usage box.
Use this if you've inserted the icon(s) with the HTML method explained in the Usage box.
CSS
your-class/id:before{
content:'icon-unicode';
font-family:'cappuccicons';
/* add more styling here */
}
content:'icon-unicode';
font-family:'cappuccicons';
/* add more styling here */
}
Simply add whatever styling properties you want to the icon(s)'s CSS code.
See how to set it up in the Usage box.
See how to set it up in the Usage box.
PNG
SVG