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
).
See the LICENSE.md
file.
See the CHANGELOG.md
file.
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
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.
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.
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";
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.
In order to build the icon fonts, LESS and CSS yourself, you'll need to have node.js installed on your development machine.
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.
Once you've installed node.js, browse to the project's root directory and run the following command to install all dependencies:
npm install
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.
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.