Skip to content

JaJuMa-GmbH/awesome-hyva

BranchesTags

Repository files navigation

Awesome Hyvä for Magento 2 & Mage-OS with Hyvä Themes by JaJuMa

Awesome Hyvä extension by JaJuMa allows using Font Awesome 5 & Font Awesome 6 icons as SVGs on Magento 2 & Mage-OS sites using Hyvä Themes.



Compatible with

Hyvä Themes Mage-OS Magento

Features

Awesome Hyvä for Magento & Mage-OS with Hyvä Themes

  • includes 3500+ icons:
    • Font Awesome 5
      • Solid Style Icons
      • Regular Style Icons &
      • Brands Icons
    • Font Awesome 6
      • Solid Style Icons
      • Regular Style Icons &
      • Brands Icons
  • provides 6 ViewModels for adding icons in code
  • allows adding Font Awesome Icons in CMS content from Backend.

Further Info, Extension Description & Manual

Demo

Font Awesome 5 & 6 SVG icons for Hyvä Themes Demo:

Icon List

List view and detail view with all included icons for copy & paste the code to use the icons in your project:

Installation

Install via composer as any other Magento extension from github:

composer require jajuma/awesomehyva

or get it from Extension Website for manual installation in app/code/ as any other Magento extension.

⚠️ Version 2.0.0+ requires Hyvä Theme Version >=1.1.12

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 6 view models:

  • For Font Awesome v5:

    • AwesomeiconsSolid
    • AwesomeiconsRegular
    • AwesomeiconsBrands

  • For Font Awesome v6:

    • Awesomeicons6Solid
    • Awesomeicons6Regular
    • Awesomeicons6Brands

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

Then render the icons like this:

<?= $awesomeiconsRegular->addressBookHtml('text-red-100', 24, 24) ?>

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

<?= $awesomeicons6Regular->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:

Release <= 1.0.1

{{awesome "solid/address-book" classes="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}}
  • "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.

License

The code is licensed under the MIT License (MIT)

Other Magento 2 & Hyvä Themes Extensions by JaJuMa

Other Services by JaJuMa

© JaJuMa GmbH | www.jajuma.de

About

🚀 Font Awesome Icons ⚐ for Magento 2 & Mage-OS with Hyvä Themes

www.jajuma.de/en/jajuma-develop/hyva-extensions/font-awesome-icons-for-hyva-themes-extension

Topics

icons font-awesome magento2 magento2-extension magento-community magento2-extension-free font-awesome-5 magento-2-module jajuma hyva jajuma-gmbh hyva-themes hyva-community hyva-modules mage-os hyva-module hyva-icons mage-os-extension

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

9 stars

Watchers

2 watching

Forks

1 fork
Report repository

Releases 11

2.1.6 Latest
Jul 12, 2024
+ 10 releases

Packages

No packages published

Contributors 2

  •  
  •  

Languages