One moment, we're cooking some code examples

   
Header image

Font Awesome

Learn all about the Font Awesome icons and their cool customizations.

Todo

  • Default - uitleg en implementatie van de Font Awesome icon.
  • Styles - De verschillende stijlen weergeven + html code.
  • Animation basic - een voorbeeld van de basis animaties.
  • Animated - een voobeeld van de animatie opties + een link naar https://fontawesome.com/docs/w...
    Icons

    Learn about the Icons

    Icons are functionally just small pictures, they can be used in all sorts of places like buttons navbars and links as can be seen in other demo pages. Using them in TypeStack is actually surprisingly easy. We use an icon Library called "Font Awesome".
    Let’s see some examples of all kinds of cool icons.

    Font Awesome implementation

    To implement Font Awesome into your website you have 2 ways to do so. Number one is using Web Fonts + CSS and number two is SVG + JS

    WebFont + CSS

    Option one is using the old way with Web Font + CSS. This way you load in the webfont. And in combination with css the icons will render as an CSS pseudo-elements on the website

    Added by HTML

    pseudo-element

    SVG + JS

    The other option is using SVG + JS. this way you render the icons as SVG into you website. this is also what TypeStack is using, the advantage of this is that you can use a svg in more ways. For example you can mask the icon, and you can layer them on top of each other as you can see we did here.

    Added by HTML

    2.048 Layering icons

    Font Awesome styles

    The Font Awesome icons come in all type of styles for us. Here is a list of all the styles you can use with the icons.

    Not every icon has all, of the styles displayed here.

    • Solid

    • Regular

    • Light

    • Thin

    • Duotone

    • Brands

    Basic animation

    You can also animate the Font Awesome icons. Here is an example of all the basic animation Font Awesome provides. All you have to add is fa- + animation type after the icon code inside html.

    • Beat

    • Fade

    • Bounce

    • Flip

    • Shake

    • Spin

    Custom animation

    A default animation is fine. But to make it special, you can play with the animation settings.

    Firstly you can combine the animation setting like we did here where we combined the beat and fade animation on the heart icon. Secondly you can use the different options that Font Awesome provides like we used with the gear icon. And the last option is that you can use the variables of Font Awesome to change the timing, rotation, speed etc..

    If you want to see more about the customization of the animations Click here

    • Beat + Fade

    • Extra options

    • Style