iCheckMovies Icon Font

iCheckMovies Icon Font is an open source icon font, designed for the iCheckMovies website. It features dozens of unique icons in three styles:

• Default: just the icon (.icm-icon-*).
• Circled: the icon with a nice circle around it (.icm-icon-*-circled).
• Filled: a filled circle with a negative cutout of the icon (.icm-icon-*-filled).

License

See the LICENSE.md file.

Changelog

See the CHANGELOG.md file.

Usage

Quick start

You can either:

• Download the latest release
• Clone the repository: git clone https://github.com/studio-donder/icheckmovies-icon-font.git
• Install with Bower: bower install icheckmovies-icon-font

Manual usage

Fonts

Copy the font files (availabe in eot, svg, ttf and woff format) you need from build/fonts to your project's font folder. You can also install them in your OS and use them to design stuff.

CSS

Use one of the CSS files found in build/styles (normal or minified) and include them in your project. The CSS imports the font files using the @font-face declaration:

@font-face {
  font-family: 'iCheckMovies';
  src: url('/fonts/iCheckMovies.eot');
  src: url('/fonts/iCheckMovies.eot?#iefix') format('embedded-opentype'),
    url('/fonts/iCheckMovies.woff') format('woff'),
    url('/fonts/iCheckMovies.ttf') format('truetype'),
    url('/fonts/iCheckMovies.svg#iCheckMovies') format('svg');
}

Replace the /fonts/ path with the path you installed the fonts in.

LESS

If you prefer building the CSS yourself using LESS, use the LESS file found in build/styles. You can customize three variables to adjust the output file to your project's environment. Default values are:

@icm-icon-font-path:   "/fonts/";
@icm-icon-font-name:   "iCheckMovies";
@icm-icon-font-svg-id: "iCheckMovies";

HTML

Always use the .icm-icon class combined with a specific icon class (e.g. icm-icon-plus-circled). For example:

<span class="icm-icon icm-icon-plus-circled"></span>

This prints an icon with a + shape and a circle around it.

Building yourself

Node.js

In order to build the icon fonts, LESS and CSS yourself, you'll need to have node.js installed on your development machine.

FontForge

Also, since this project is relying on grunt-webfont, please refer to its documentation regarding the installation of FontForge, which enables auto hinting on the generated fonts.

Dependencies

Once you've installed node.js, browse to the project's root directory and run the following command to install all dependencies:

npm install

Grunt

Now you're ready to build! This project uses Grunt to run all its tasks. There are a few tasks defined in the GruntFile.js task definition file, but we've defined an alias task called default that runs all necessary tasks in the correct order (from the project's root directory again):

grunt default

This will clean all files, generate the font files, compile the LESS files to CSS and put the results in the build directory.

Versioning

To release a new version, do as follows:

• Update package.json: update the version number.
• Update CHANGELOG.md: describe the changes here.
• Release the version in the releases tab on GitHub.