Font Awesome 5 icons for UIKit 3

Extended your UIkit icon library with custom icons.

Add Font Awesome 5 icons to UIKit Framework

UIkit's icon library can be extended and customized with your own icon files.

UIkit's icon library contains a number of SVG icons bundled in a single JavaScript file uikit-icons.min.js. This file includes all icons, no additional SVG files are needed. In this document, we will describe how you can add Font Awesome 5 icons to this library. Look at the UIKit's Icon component for an overview of the default icons.

Add Font Awesome 5 icons.

With these simple steps, you can easily add your own SVG icons to UIKit framework by including them in UIkit's build process.

Setup UIkit from Github source.
Download Font Awesome 5 icons for UIKit 3.
Include your prefered SVG icons in UIkit's build process.

The build process will check 3 places for svg icon files:

  • The Source folder: /src/images/icons/*.svg
  • The custom folder: /custom/icons/*.svg
  • Any custom theme: /custom/mytheme/icons/*.svg
Compile UIkit to include all your icons. 
 npm run compile

Your additional icons will now be added to the icon library, in one of these two places:

  • dist/js/uikit-icons.js if you have added the icon to UIkit globally
  • dist/js/uikit-icons-mytheme.js if the icon is only inside a UIkit theme

Make sure to include the icon library script, for more details see the installation instructions.

Usage

Place your icons anywhere in your content the same way you add icons in UIKit 3.

Please notice that I have prefixed all the icons with fa- to prevent conflict with any existing icons.

Standard Example

 
 <span uk-icon="fa-chrome"></span> 
 <span uk-icon="fa-google-drive"></span>
 <span uk-icon="fa-snapchat-ghost"></span> 
 <span uk-icon="fa-nintendo-switch"></span>

Ratio Example

 
 <span uk-icon="icon: fa-bitcoin; ratio: 3;"></span>
 <span uk-icon="icon: fa-bitcoin; ratio: 5;"></span>
 <span uk-icon="icon: fa-bitcoin; ratio: 7;"></span>

Button Example


 <a href="#" class="uk-icon-button" uk-icon="fa-twitter"></a>
 <a href="#" class="uk-icon-button" uk-icon="fa-facebook-f"></a>
 <a href="#" class="uk-icon-button" uk-icon="fa-google"></a>

Mixed Example

 
 <span class="uk-text-warning" uk-icon="icon: fa-grunt; ratio: 7;">
 <span class="uk-text-success" uk-icon="icon: fa-xbox; ratio: 7;">
 <span class="uk-text-danger" uk-icon="icon: fa-laravel; ratio: 7;">