Font Awesome, the web's most popular icon set and toolkit, meets Hyvä Themes, the amazing new Magento 2 frontend.
Professionally designed and pixel-perfect icons meet outstanding performance.
A perfect match for best-in-class customer and developer experience.
Awesome Hyvä Extension enables you to choose from 1600+ free icons right in your project. No more time wasted on searching and creating svg/vector icons.
All the icons you need for your Hyvä Theme store are now available right at your hand, with autocomplete in your IDE or for adding into CMS content via backend.

Awesome Hyvä Demo & Icon List

Scope & Features

Using Font Awesome Icons In Hyvä Themes
with JaJuMa "Awesome Hyvä" Module

How to use Font Awesome icons in Hyvä Themes in view models

1. Install the module via composer as any other Magento extension from github.

2. Require one of the view models in your template:

For Font Awesome v5:

/** @var \Jajuma\AwesomeHyva\ViewModel\AwesomeiconsSolid $awesomeiconsSolid */
$awesomeiconsSolid = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\AwesomeiconsSolid::class);

/** @var \Jajuma\AwesomeHyva\ViewModel\AwesomeiconsRegular $awesomeiconsRegular */
$awesomeiconsRegular = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\AwesomeiconsRegular::class);

/** @var \Jajuma\AwesomeHyva\ViewModel\AwesomeiconsBrands $awesomeiconsBrands */
$awesomeiconsBrands = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\AwesomeiconsBrands::class);

For Font Awesome v6:

/** @var \Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Solid $awesomeicons6Solid */
$awesomeicons6Solid = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Solid::class);

/** @var \Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Regular $awesomeicons6Regular */
$awesomeicons6Regular = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Regular::class);

/** @var \Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Brands $awesomeicons6Brands */
$awesomeicons6Brands = $viewModels->require(\Jajuma\AwesomeHyva\ViewModel\Awesomeicons6Brands::class);

3. Then render the icons like this:

<?= $awesomeiconsRegular->addressBookHtml('w-8 h-8 fill-current text-red-100', 24, 24) ?>

<?= $awesomeicons6Regular->addressBookHtml('w-8 h-8 fill-current text-red-100', 24, 24) ?>

The method name is the camel-cased icon name, followed by Html. In an IDE you should have autocompletion for all available methods. The parameters are optional and change the class, width, and height attributes of the SVG element.
It is recommended to set all of them so that the images are not rendered in huge sizes if CSS fails to load.

or you may also pass additional attributes like this:

<?= $awesomeiconsRegular->addressBookHtml('w-10 h-10 fill-current', 24, 24, ['style'=>'color:#e24848']) ?>

<?= $awesomeicons6Regular->addressBookHtml('w-10 h-10 fill-current', 24, 24, ['style'=>'color:#e24848']) ?>

How to use Font Awesome icons in Hyvä Themes in CMS content

Awesome Hyvä module adds an icon directive to render icons in filtered content like CMS blocks or pages. So you may add icons in text / code blocks like this:

Release <= 1.0.1

{{awesome "solid/address-book" classes="w-6 h-6 fill-current text-red-100" width=12 height=12}}

Release >= 2.0.0

{{icon "awesomeicons/solid/address-book" classes="text-red-100" width=12 height=12}}

{{icon "awesomeicons6/solid/address-book" classes="text-red-100" width=12 height=12}}