Learn How to Implement the HippIcons Web Font into your App

Having a stylish set of icons in your website or app provides a huge visual boost for user interface . In this lesson, I am going to teach you how to install and use HippIcons as an alternative icon font in your web application , website , or mobile app .

Option 1. Installing the Icon Font into your Project via CDN

There are several ways to get HippIcons loaded into your project. The easiest way is to simply use our content delivery network to dynamically load the fonts files and CSS. Install it placing the following snippet of code into the head of your html document. 

<link rel="stylesheet" href="https://cdn.hippicons.com/css/hippicons-min.css">

There are several benefits for using the CDN, such as…

1. Optimized global delivery. Your visitors in Bangkok won’t need to wait a few extra seconds for your server in San Jose to respond.
2. Automatic Caching. Return visitors will not require a full reload of the font package, making your site faster. 
3. Easy installation. One line of code and you’re done.
4. Automatic updates. Each new release is pushed to the CDN, so you always know you’re working with hippest, freshest, best looking icons.

Option 2. Cloning the Project from GitHub

If you want to hack away at the entire project and make your own customizations, cloning or forking HippIcons from github is your best bet. If you don’t know what Git is, this is probably not the best option for you.

git clone https://github.com/codediodeio/hippicons.git

The only files you need for the icons to work are are the css/hippicons-min.css and the all font files in the fonts/. directory.

Option 3. Manage the project with Bower

HippIcons are also registered with Bower. Just run the command:

bower install hippicons

Basic Usage

Any one of the 400+ HippIcons can can be called based on its CSS class name. Their class names for icons are closely matched to the FontAwesome package, which makes them a drop-in replacement for projects already using FontAwesome. For example:

<i class="hi hi-planet"></i>

Modifying and Animating Icons

There are also a bunch of modifier classes to change the size, orientation, and animation of the icons. Check out the documentation for a full list. Let’s make this guy 5 times larger and spin ‘em.

Unlock the final step and I’ll show you how I made this planet spin!