Font Awesome Free v5 icons for UIkit and Yootheme Pro

4.7/5 rating (7 votes)
  • Updated: 09 October 2019
  • File size: 1.03 MB
  • Version: 1.7.0
  • Author: yoonique[.]net
club
plugin
yootheme pro
uikit

Updated Mar 8th, 2019. Yootheme has changed the code and handling of SVGs in Yootheme Pro version 1.18.11. Before you upgrade to Yootheme 1.18.11 or higher, you have to update this icon set.


This download lets you extend the UIkit 3 icons with Font Awesome Free 5 icons (free version). You will be able to use the beautiful Font Awesome Free icons with UIkit 3 using the UIkit icon syntax. That means you don't have to include yet another JavaScript framework just for "some" icons. You can use this also in your Yootheme Pro themes (but this will not add any additional icons to the Yootheme Pro UI). It will not work in Yootheme Warp 7 templates or Widgetkit, because those still run on UIkit 2.

The following icons have been included (Font Aweseome Free 5.6.3, as of January 10):

https://fontawesome.com/icons?d=listing&m=free

This UIkit 3 extension will not work with UIkit 2. You need a UIkit 3 environment for this to work. For example, Yootheme Pro templates use UIkit 3. (And this is also what we tested.)

If you have any questions, please do not hesitate to contact us.

Installation

Simply unzip the downloaded archive and copy the files to your site.

For this installation guide we assume you will unzip the downloaded into a folder js located in the root of your site.

If you want extend the UIkit icons with ALL available Font Awesome Free 5 icons, you have to include the following lines in the head of your site.

<script src="/js/js-categories/uikit-fa-brands.js"></script>
<script src="/js/js-categories/uikit-fa-solid.js"></script>
<script src="/js/js-categories/uikit-fa-regular.js"></script>

Yootheme Pro settings

Yootheme Pro UIkit Font Awesome installation

Usage

You can use the new icons as described in https://getuikit.com/docs/icon

Example 1:

Brand icon "Google chrome", double size

<span uk-icon="icon:chrome;ratio:2"></span>

Example 2:

Solid "frown" icon, double size

<span uk-icon="icon:frown;ratio:2"></span>

Example 3:

Regular "frown" icon, 3.5x size

<span uk-icon="icon:frown-r;ratio:3.5"></span>

Since Solid and Regular icons have the same name, you have to add the -r suffix to the name for Regular icons.

Font Awesome Free 5 Categories

In case you don't need all Brand, Solid, and Regular icons, you can also include icons by category. This will also reduce bandwidth since much smaller files will be loaded.

The Font Awesome Free 5 categories are listed at https://fontawesome.com/icons?d=gallery&m=free

Let's say you want to use the solid medical icon-set, please include

<script src="/js/js-categories/uikit-fa-medical.js"></script>

Yootheme Pro UIkit Font Awesome examples

Examples

The fonts are installed locally, so you don't have to worry about any "cookie" issues.

License

The icons are distributed under the terms of the Fontawesome license

https://fontawesome.com/license


Available files/categories and number of icons in each file

916 uikit-fa-solid.js
415 uikit-fa-brands.js
152 uikit-fa-regular.js

The above three files contain all icons of the files below. 1483 icons in total.

17  uikit-fa-accessibility.js
25  uikit-fa-buildings.js
60  uikit-fa-audio-video.js
37  uikit-fa-automotive.js
111 uikit-fa-arrows.js
21  uikit-fa-autumn.js
17  uikit-fa-animals.js
154 uikit-fa-business.js
24  uikit-fa-charity.js
39  uikit-fa-chat.js
9   uikit-fa-chess.js
68  uikit-fa-code.js
56  uikit-fa-communication.js
32  uikit-fa-computers.js
23  uikit-fa-currency.js
26  uikit-fa-date-time.js
58  uikit-fa-design.js
147 uikit-fa-editors.js
19  uikit-fa-education.js
73  uikit-fa-emoji.js
54  uikit-fa-files.js
17  uikit-fa-gaming-tabletop.js
13  uikit-fa-genders.js
13  uikit-fa-halloween.js
36  uikit-fa-hands.js
20  uikit-fa-health.js
10  uikit-fa-holiday.js
33  uikit-fa-images.js
302 uikit-fa-interfaces.js
15  uikit-fa-logistics.js
198 uikit-fa-maps.js
22  uikit-fa-marketing.js
24  uikit-fa-mathematics.js
63  uikit-fa-medical.js
20  uikit-fa-moving.js
396 uikit-fa-objects.js
69  uikit-fa-payments-shopping.js
15  uikit-fa-political.js
33  uikit-fa-religion.js
108 uikit-fa-shapes.js
26  uikit-fa-spinners.js
16  uikit-fa-sports.js
185 uikit-fa-status.js
44  uikit-fa-travel.js
81  uikit-fa-users-people.js
57  uikit-fa-vehicles.js
39  uikit-fa-weather.js
10  uikit-fa-winter.js
80  uikit-fa-writing.js


The intersection of the icons in these files is not empty.

Categories

Yootheme Pro
100 Days Access and Support 10 Days Access and Support
$18 $14

100 days of full access to our support forum and download area for all our extensions.

10 days of full access to our support forum and download area for all our extensions.