🚀 Font Awesome Icons ⚐ for Hyvä Themes

Overview

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

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

Other Services by JaJuMa

© JaJuMa GmbH | www.jajuma.de

You might also like...
Font Awesome 5/6 (pro/subset) Icon Picker
Font Awesome 5/6 (pro/subset) Icon Picker

Font Awesome Icon Picker Icon-Picker für Font Awesome ab Version 5. Der Iconpicker wird an Text-Eingabefelder angebunden. Beim Klick öffnet sich ein P

Bring multi themes support to your Laravel application with a full-featured Themes Manager
Bring multi themes support to your Laravel application with a full-featured Themes Manager

Introduction hexadog/laravel-themes-manager is a Laravel package which was created to let you developing multi-themes Laravel application. Installatio

A package for Myanmar Font, Phone and other Myanmar tools using Laravel Macro

Laravel Myanmar Tools A package for Myanmar Font, Phone and other Myanmar tools using Laravel Macro. Installation composer require pyaesoneaung/larave

A package to easily make use of Iconic icons in your Laravel Blade views.
A package to easily make use of Iconic icons in your Laravel Blade views.

Blade Iconic A package to easily make use of Iconic icons in your Laravel Blade views. For a full list of available icons see the SVG directory. Iconi

A package to easily make use of Simple Icons in your Laravel Blade views.
A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons A package to easily make use of Simple Icons in your Laravel Blade views. For a full list of available icons see the SVG directory.

Template repository for new Blade Icons packages.

Blade Icons Template This is a template repository for new icon packages for Blade Icons.

All the cryptocurrency icons available on coinmarketcap.com
All the cryptocurrency icons available on coinmarketcap.com

Cryptocurrency Icons The official cryptocurrency icon pack for all your favourite cryptocurrencies. This repository contains all the cryptocurrency ic

Icônes Form Widget for October and winter CMS. One library, over 100,000 vector icons, and 108+ icon sets powered by Iconify
Icônes Form Widget for October and winter CMS. One library, over 100,000 vector icons, and 108+ icon sets powered by Iconify

Icônes Form Widget 🪄 🎉 🎊 Access thousands of SVG icons as a backend form widget. One library, over 100,000 vector icons, Modern replacement for ico

A package to easily make use of SVG icons in your Laravel Blade views.
A package to easily make use of SVG icons in your Laravel Blade views.

Blade Icons A package to easily make use of SVG icons in your Laravel Blade views. Originally "Blade SVG" by Adam Wathan. Turn... !-- camera.svg --

Laravel 5 Flash Notifications with icons and animations and with a timeout

Notify (Laravel) Notify alert boxes to the browser with sound and font awesome icons and give it a timeout to fly out. Works great to notify the user

A simple little WordPress block that allows you add social share icons to your website.
A simple little WordPress block that allows you add social share icons to your website.

Social Sharing Block This plugin requires WordPress 5.9+ or 5.8+ with Gutenberg active. A simple little block that allows you to add social share icon

Awesome Task Runner

Bldr Simplified Build System/Task Runner Uses Yaml, JSON, XML, PHP, or INI for configs Quick Usage To develop, run ./script/bootstrap, and then ./scri

Awesome tips for Laravel

Awesome tips for Laravel

A curated list of Awesome WordPress Theme, Plugins and Framework development Resources and WordPress Communities.

Awesome WordPress A curated list of Awesome WordPress Theme, Plugins and Framework development Resources and WordPress Communities. Inspired by bayand

Initial template to start your awesome Laravel, Tailwind and Vue projects
Initial template to start your awesome Laravel, Tailwind and Vue projects

Features Laravel 8.* Tailwind 2.1 Ready and Loaded @tailwindcss/typography @tailwindcss/forms Dark mode ready All variants enabled by default Vue 2, V

A curated list of awesome Laravel bookmarks, packages, tools, articles, tutorials and related resources.

ATTENTION: This list is obsolete and discontinued. Please find a much more comprehensive, much more well-maintained awesome-laravel list at chiraggude

Laracast's awesome larabook tutorial - refreshed with Laravel 5.0 code

Larabook Updated - Laravel 5.0 A light version of Facebook, called Larabook. Updated using new techniques and features of Laravel 5.0 Fixes I tried my

An awesome starter template to create your Salla Apps today! 🚀
An awesome starter template to create your Salla Apps today! 🚀

Salla Apps Starter Kit An awesome starter template to create your Salla Apps today! Explore our blogs » Report Bug · Request Feature . /Salla Develop

Releases(2.1.2)
Owner
JaJuMa GmbH
Full-Service #eCommerce + #Magento Agency | Magento based all-in-one #Marketplace Solution | Die Magento-basierte #Marktplatz Software | Magento 2 Extensions
JaJuMa GmbH
Font Awesome 5/6 (pro/subset) Icon Picker

Font Awesome Icon Picker Icon-Picker für Font Awesome ab Version 5. Der Iconpicker wird an Text-Eingabefelder angebunden. Beim Klick öffnet sich ein P

Friends Of REDAXO 17 Oct 22, 2022
All the cryptocurrency icons available on coinmarketcap.com

Cryptocurrency Icons The official cryptocurrency icon pack for all your favourite cryptocurrencies. This repository contains all the cryptocurrency ic

Erik Thiart 130 Dec 29, 2022
A curated list of awesome Laravel bookmarks, packages, tools, articles, tutorials and related resources.

ATTENTION: This list is obsolete and discontinued. Please find a much more comprehensive, much more well-maintained awesome-laravel list at chiraggude

Unnawut Leepaisalsuwanna 96 Aug 5, 2022
WordPlate is a wrapper around WordPress. It makes developers life easier. It is just like building any other WordPress website with themes and plugins. Just with sprinkles on top.

WordPlate is simply a wrapper around WordPress. It makes developers life easier. It is just like building any other WordPress website with themes and plugins. Just with sprinkles on top.

WordPlate 1.7k Dec 24, 2022
A collection of experimental block-based WordPress themes.

Frost An experimental block theme for designers, developers, and creators. About Frost is a Full Site Editing theme for WordPress that extends the inc

Fahim Murshed 0 Dec 25, 2021
Magento 2 base theme for sharing features across multiple themes

MASE2 Optimus theme About and purpose Optimus is a free and home-made Magento 2 theme, developed by Studio Emma . Its purpose is providing a starting

Studio Emma 87 Oct 7, 2022
Developer-friendly framework heavily inspired by Laravel and based on Timber and Wpemerge solutions for WordPress themes development with Bedrock folder structure

Lightweight Brocooly (Brocket) Improved Controllers, Middleware and Routers, but slightly less powerful Container Open beta. Package in development Cr

Ihar Aliakseyenka 3 Mar 4, 2022
BreadBooru is a light, quick, and easy to setup imageboard with themes, images, and video support

BreadBooru a bad imageboard, that has nothing to do with (dan/gel)booru, and yet still has booru in the name BreadBooru is a light, quick, and easy to

bread 2 Jan 22, 2022
Vite integration for WordPress plugins and themes development.

Vite for WordPress Vite integration for WordPress plugins and themes development. Usage Let's assume we have this plugin files structure: my-plugin/ ├

Dzikri Aziz 48 Jan 2, 2023
This Magento 2 module adds the option to use Flagpack icons in your Hyvä frontend.

Siteation - Hyva Icon Pack - Flags This Magento 2 module adds the option to use Flagpack icons in your Hyvä frontend. This requires that you have a wo

Siteation 5 Jun 12, 2023