In this post, I outline how I created the animated icons on LINK-Caribbean‘s homepage using icon fonts and CSS-Animations.
Designing the Symbols
Each element was designed in Sketch 3 (currently my graphic design program of choice). Of course, Photoshop, Illustrator Fireworks or any other design program will do.
Converting the Symbols to SVG
Designs were exported as SVGs right from within Sketch 3. (another reason I love it). Again Illustrator or any third-party tool can be used to generate the SVGs.
Converting the SVGs into Icon Fonts
Next, the SVG elements needed to be converted into actual Icon Fonts. Why icon fonts? Well, because they possess the following qualities:
● Their sizes and colours can be easily changed (similar to regular text fonts)
● All the other css-based manipulations, including line-height, shadows and alignments can be applied to them.
To generate icon fonts, an icon font generator is required. Icomoon is my generator of choice, but there are numerous options including fontello and fontastic to choose from.
Adding the Icon Font into our project
Having derived the icon fonts, they were ready to be added to the project.
The dowloaded package includes: 1/ the font files and 2/ a style sheet, both of which need to be included in the project directory.
The style sheet was added/linked to our document the usual way (in the document’s <head>) and referenced the font file accordingly.
The CSS classes, generated for each icon font element and defined in the style sheet, were applied to our target elements in order to display the icons where required. Lost?… Don’t worry; the downloaded packages usually include ‘Read Me‘ text files and a ‘Demo‘ implementation to guide you.
On completion, using icon fonts rather than regular image files, the Icons/Symbols were now displayed on the homepage as desired. Done? Well… almost!
Add interactivity (animation) to the Icons
The last thing was to add bit of interactivity. I wanted a cool visual response on user interaction (i.e: hovering over the icons).
There are many ways to achieve this, but i decided to go the ‘CSS-Animations‘ route and the use of Daniel Eden’s brilliant ‘Animate CSS’ library.
On implementation, our static icons were magically transformed, using CSS, into super cool icons, which flip around (along the Y-axis) on hovering, while retaining the editability of regular text fonts. – Cool, huh?
Done!
Basically, that is how I created the animated icons on LINK-Caribbean‘s homepage. Do give it a go in your next project.
