README

此扩展允许在 twig 模板中支持 FontAwesome SVG 图标作为内联输出。

特性

• 可访问性：添加 aria-hidden="true" role="img" 或具有 aria-labeledby 的标题项，如 Font Awesome 推荐的 可访问性
• 支持 Font Awesome composer 包（仅包含免费图标）和手动提供的图标（包括专业图标）
• 无需 Font Awesome 的 css 和javascript 文件（仅在自己的样式表中添加图标大小的 css）

安装

要安装此包，您可以使用 composer。打开命令行，进入您的项目目录并执行

composer require xenbyte/font-awesome-svg-twig-bundle

如果您不使用 Symfony Flex，请通过将其添加到项目 config/bundles.php 文件中注册的包列表中来启用扩展

// config/bundles.php
return [
    // ...
    Xenbyte\FontAwesomeSvgTwigBundle\FontAwesomeSvgTwigBundle::class => ['all' => true],
];

设置 Font Awesome

选项 1：使用 fortawesome/font-awesome 包

composer require fortawesome/font-awesome

composer 包仅包含免费图标。

选项 2：手动提供字体文件

将 node_modules/@fortawesome/fontawesome-pro/svgs 内的文件复制到例如 assets/fontawesome。

配置

如果您需要自定义全局扩展配置，可以创建一个 /config/packages/font_awesome_svg_twig.yaml 文件，并添加您的配置

font_awesome_svg_twig:
  icon_folder: assets/fontawesome
  svg_class: fa-icon

使用示例

{{ fa("home") }}
{{ fa("fas home") }}
{{ fa("home", {style: 'solid') }}
{{ fa("home", {style: 'regular', color: '#330000', size: '2rem', class: 'icon') }}
{{ fa("home", {style: 'duotone', color: '#333', secondaryColor: '#999', 'title': 'Title', data-foo) }}

默认样式为 "solid"。 {{ fa("home") }} 和 {{ fa("home", {style: solid}) }} 将产生相同的输出。

作为选项中添加样式的替代，您也可以为某些样式添加简短的别名，例如 {{ fa("fat home") }} 对应于 {{ fa("home", {style: thin}) }}。

以下为支持的别名：

• fas = solid
• far = regular
• fad = duotone
• fat = thin
• fal = light
• fab = brands

建议添加一些默认 css。所有图标都拥有 fa-icon 类

.fa-icon {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

选项

• resource_folder：包含 Font Awesome 图标的文件夹
• svg_class：添加到 svg 元素的类

限制

堆叠项目 目前不支持此扩展。