Add Font Awesome 5 Free and Pro to Kartik's Icon class. Includes FA5 layers.

pxao02 commented 6 years ago

Scope

This pull request includes a New feature (see issue #34 )

Changes

The following changes were made (changelog not updated yet):

Added FontAwesomeFreeAsset.php and FontAwesomeProAsset.php
Icon.php constants: added FA5FREE and FA5PRO
Icon.php prefixes: added prefixes for FA5 Free and Pro
Icon.php show method: added $fa5 parameter to distinguish between "fas", "fal", "far" and "fab" (defaults to "fas" since most Free icons are "fas")
Icon.php show method: because of former change and backwards compatibility, $tag parameter would precede the $fa5 parameter. Added check for empty $tag param making it default 'i'
Icon.php showLayers method added

Usage with Font Awesome 5

Basic usage is roughly the same as FA4, but with some differences. See https://fontawesome.com for more information and new icon names and styles.

I made the changes for the SVG with JS version. CSS webfonts are not yet included, but may be included if desired. Has less options, though.

Font Awesome 5 Free is free to use for everyone and can be used with the free CDN. FontAwesomeFreeAsset will add the CDN JS file.

Font Awesome 5 Pro is available for download by paid subscription - there's no CDN yet. I have such a subscription and made the code based on my download, the JS file is of course not included. FontAwesomeProAsset will point to the uploaded file on the server. It will then open up additional icons and more icon styles.

The functionalities do not change, so far only the number of icons differ.

Examples

Change the Icon Framework parameter in the params.php to either fa5free or fa5pro in order to use the FA5 icons and Assets.

In View or Layout file:

use kartik\icons\Icon;
Icon::map($this);

In View file: Icon::show('address-book',['class'=>'fa-2x', 'data-fa-transform'=>'grow-8'],NULL,NULL,NULL,'fal');

Icon::showLayers([
        ['name'=>'circle', ],
        ['name'=>'address-book', 'style'=>'fal', 'options'=>['class'=>'fa-inverse fa-spin', 'data-fa-transform'=>'shrink-8'], ],
    ],
    ['class'=>'fa-4x'],
);

Please note

Please note that I'm a newbie on GIT and still learning! I just made the changes, commented them where appropriate but did not change any versioning information in the files itself. Please review the code and add this where necessary. Also, please let me know if there's anything I can learn to improve.

gthaka commented 6 years ago

Hi, I am also interested in this. @kartik-v Kindly review and give us some feedback please. Thanks

kartik-v commented 6 years ago

Thanks will check and update.

kartik-v / yii2-icons