Awesome Hyvä by JaJuMa

Awesome Hyvä extension by JaJuMa allows to use Font Awesome 5 icons as SVGs on Magento 2 sites using Hyvä Themes.

The module includes:

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

Further Info, Demo, Extension Description & Manual

• Extension Website EN
• Extension Website DE
• Demo & List of all included icons

Installation

Install via composer as any other Magento extension from github:

composer require jajuma/awesomehyva

Using Font Awesome icons in Hyvä Themes with JaJuMa "Awesome Hyvä" module

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

JaJuMa "Awesome Hyvä" module provides 3 view models:

• AwesomeiconsSolid
• AwesomeiconsRegular
• AwesomeiconsBrands

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);

Then render the icons like this:

<?= $awesomeiconsRegular->addressBookHtml('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 (in single quotes) followed by 2 values for 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 as an array:

<?= $awesomeiconsRegular->addressBookHtml('text-red-100', 24, 24, ['style'=>'position:relative']) ?>

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="text-red-100" width=12 height=12}}

• "classes" parameter is used for setting any css class.
• "width"/"height" parameters are used for setting width/height attributes for icons.
• Hint: You may get the code snippets for copy & paste for each icon on the demo - see link below.

Demo

Font Awesome 5 SVG icons for Hyvä Themes Demo

With list of all included icons and detail view for copy & paste the code to use the icons in your project.

License

The code is licensed under the MIT License (MIT)

Other Magento 2 Extensions by JaJuMa

• 🖼️ Performance & UX:
  WebP Optimized Images for Magento 2
  The #1 WebP Images Solution for Magento 2

• 🙈 SEO:
  PRG Pattern Link Masking for Magento 2
  Link Masking for Layered Navigation

• 👮 User Experience:
  Shariff Social Share for Magento 2
  GDPR compliant and customizable Sharing Buttons

• 🙆‍♂️ User Experience:
  Customer Navigation Manager for Magento 2
  Easily manage the links in your Customer Account

• 🎥 Content Management:
  Video Widget for Magento 2
  Embedding YouTube videos, GDPR compliant with auto preview image & fully responsive

• 🚀 Performance & UX:
  Page Preload for Magento 2
  Faster faster page transitions and subsequent page-loads by preloading / prefetching

• 📈 Marketing:
  Matomo Analytics for Magento 2
  Web Analytics - GDPR Compliant

• 🍯 Site Optimization:
  Honey Spam Anti-Spam for Magento 2
  Spam Protection - Reliable & GDPR Compliant

• 🔔 Marketing:
  Customer Registration Reminder & Cleanup for Magento 2
  Increase Your Customer Engangement & Cleanup your Customer Account Data Automatically

Other Services by JaJuMa

• 🛍️ JaJuMa-Market: Marketplace Software
  Complete Online Marketplace Software Solution. For Professional Demands. Feature Rich. Flexibly Customizable.

• 🛒 JaJuMa-Shop
  Customized Magento Shop Solutions.

• 🚀 JaJuMa-Shop: Hyvä Magento Shop Development
  Hyvä Magento Shop Development.

• 📙 JaJuMa-Shop: Magento Handbuch in Deutsch
  Magento Handbuch in Deutsch.

• 🗂️ JaJuMa-PIM
  Product Information Management. Simple. Better.

• ➕ JaJuMa-Develop: Magento 2 Extensions
  Individual Solutions For Your Business Case.

• 🖌️ JaJuMa-Design
  Designs That Inspire.

• 👔 JaJuMa-Consult
  We Show You New Perspectives.

© JaJuMa GmbH | www.jajuma.de