jajuma/awesomehyva

此 Magento 2 扩展允许在 Hyvä Themes 中使用 Font Awesome 5 图标

维护者

详细信息

github.com/JaJuMa-GmbH/awesome-hyva

源代码

问题

安装次数: 22,177

依赖项: 0

建议者: 0

安全性: 0

星星: 10

关注者: 2

分支: 1

开放问题: 0

类型:magento2-module

2.1.6 2024-07-12 07:47 UTC

Requires

  • hyva-themes/magento2-theme-module: >=1.1.12

MIT 9214bdf88d2f357066b8b2c06586df41ebb60c01

  • JaJuMa <info.woop@jajuma.de>

This package is auto-updated.

Last update: 2024-09-12 08:12:45 UTC

README

由 JaJuMa 开发的 Awesome Hyvä 扩展允许在 Magento 2 & Mage-OS 网站上使用 Font Awesome 5 & Font Awesome 6 图标作为 SVG，通过 Hyvä Themes 使用。



兼容性

功能

适用于 Magento & Mage-OS 的 Hyvä Themes 的 Awesome Hyvä

  • 包含 3500+ 个图标
    • Font Awesome 5
      • 实心样式图标
      • 常规样式图标 &
      • 品牌图标
    • Font Awesome 6
      • 实心样式图标
      • 常规样式图标 &
      • 品牌图标
  • 提供 6 个 ViewModel 以在代码中添加图标
  • 允许在 CMS 内容中从后端添加 Font Awesome 图标。

更多信息、扩展描述和手册

演示

Font Awesome 5 & 6 SVG 图标 Hyvä Themes 演示

图标列表

包含所有图标的列表视图和详细视图，以便复制代码以在项目中使用图标

安装

通过 composer 安装，就像从 github 安装任何其他 Magento 扩展一样

composer require jajuma/awesomehyva

或从 扩展网站 获取，以手动安装到 app/code/ 作为其他 Magento 扩展。

⚠️ 版本 2.0.0+ 需要 Hyvä 主题版本 >=1.1.12

使用 JaJuMa "Awesome Hyvä" 模块在 Hyvä Themes 中使用 Font Awesome 图标

如何在 ViewModel 中在 Hyvä Themes 中使用 Font Awesome 图标

JaJuMa "Awesome Hyvä" 模块提供 6 个 ViewModel

  • 针对 Font Awesome v5

    • AwesomeiconsSolid
    • AwesomeiconsRegular
    • AwesomeiconsBrands

  • 针对 Font Awesome v6

    • Awesomeicons6Solid
    • Awesomeicons6Regular
    • Awesomeicons6Brands

在模板中需要使用其中一个 ViewModel

  • 针对 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);
  • 针对 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);

然后按照这种方式渲染图标

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

<?= $awesomeicons6Regular->addressBookHtml('text-red-100', 24, 24) ?>
  • 方法名是驼峰式图标名，后面跟着 Html。
  • 在 IDE 中，您应该有所有可用方法的自动完成功能。
  • 参数是可选的，并且更改类（在单引号中）后跟两个值，用于 SVG 元素的宽度和高度属性。
  • 建议设置所有这些，以便如果 CSS 无法加载，则图像不会被渲染成巨大的大小。

或者您也可以像这样作为数组传递额外的属性

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

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

如何在 CMS 内容中使用 Font Awesome 图标

Awesome Hyvä 模块添加了一个图标指令以在过滤内容（如 CMS 块或页面）中渲染图标。因此，您可以在文本/代码块中添加图标，如下所示

版本 <= 1.0.1

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

版本 >= 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" 参数用于设置任何 CSS 类。
  • "width"/"height" 参数用于设置图标的宽度和高度属性。
  • 提示：您可以在演示中为每个图标复制并粘贴代码片段 - 请参阅下面的链接。

许可证

代码遵循MIT许可证（MIT）

JaJuMa的其它Magento 2 & Hyvä Themes Extensions

JaJuMa 提供的其他 服务

© JaJuMa GmbH | www.jajuma.de