Approved & Verified by
Magento Marketplace
 

Unencrypted.
100% Open Source
& Customizable

Coding Standards Applied.
Clean & Readable Code

Countless Satisfied Customers:
Be The Next One!

Description

Font Awesome 5 SVG Icons For Your Hyvä Themes Magento 2 Store

Add beautiful svg/vector icons and add them easily in your code or via backend.
Includes more than 1600+ free icons
Regular style, solid style and social media/brand logos

The Problem
Adding
SVG / Vector Icons

SVG/vector icons are a great way to beautify any website, pixel-perfect, scalable and crystal clear images without the need to download each as a separate image.
So it is no surprise that literally every online store uses icons as UI elements or visual eye-catchers.
Hyvä Themes provides the Hero Icons, which are nice, but also a bit limited regarding the number of available icons as well as because of e. g. missing social media/brands icons.
For your Magento 2 Hyvä Store you maybe want a wider selection of appealing icons to choose from?
But finding, creating, and handling SVG icons can be a tedious task...
Read on to learn more about:
Awesome Hyvä - The free collection of 1600+ carefully, consistent and beautifully designed icons for your Hyvä Theme project...

The Solution
Font Awesome 5
For Hyvä Themes

With the Awesome Hyvä by JaJuMa extension you now have Font Awesome 5, the web's most popular icon set and toolkit, at hand for use in your Hyvä Themes Magento 2 store.
With more than 1600+ free icons to choose from, including Social Media and brand icons, there is an icon for all your needs available.
Add all the icons you want, easily in your code, with auto-complete in your IDE or from the backend. Icons are rendered and added as inline svg`s, to keep the bespoke Hyvä performance and without having to add a performance-killing icon font to your site.

 

Further Questions? Have a Feature-Request?
Or need some individual customization?
Lets get in touch:

Details

Awesome Hyvä Extension for Hyvä Themes
by JaJuMa In Detail.
Beauty up your Hyvä store.
Save time by having all the icons you need at hand.

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

 

See and search the full list of all 1600+ included icons on the demo site.

The demo also provides options to see the icons in your colors and to get the code for using the icons in your projects easily by copy & paste.

Go to Awesome Hyvä Demo & Icon List

Scope & Features

The module includes:

  • Solid Style Icons
  • Regular Style Icons &
  • Brands Icons

and provides 3 ViewModels

  • AwesomeiconsSolid
  • AwesomeiconsRegular
  • AwesomeiconsBrands

and allows adding Font Awesome Icons from Backend.

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:

/** @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);

3. Then render the icons like this:

<?= $awesomeiconsRegular->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']) ?>

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:

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

Changelog

 

Version: 1.0.0

  • Initial Release

Compatibility

 


More Extensions

Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store

Magento Extensions - Discover Now!

Project in Mind?We Are Happy To Discuss.

We get back to you as soon as possible!