README

A PHP class that can be used to add Font Awesome 6+'s SVG icons inline without Javascript.

安装

您可以使用Composer安装它

composer require husseinalhammad/fontawesome-svg

或者您可以直接下载FontAwesomeSVG.php文件并手动包含它。

使用方法

文件

• 下载Font Awesome（免费或专业版）
• 获取advanced-options/raw-svg文件夹并将其放置到您的项目中
• 将svg-with-js/css/fa-svg-with-js添加到您的文档中（或编写自己的CSS）

示例

// $dir = directory where SVG files are
$FA = new FontAwesomeSVG($dir);

echo $FA->get_svg('fa-solid fa-file');

添加自定义类

echo $FA->get_svg('fa-solid fa-file', ['class' => 'my-custom-class another-class']);

移除默认类.svg-inline--fa

echo $FA->get_svg('fa-solid fa-file', ['default_class' => false]);

更改<path>填充（默认为currentColor）

echo $FA->get_svg('fa-solid fa-file', ['fill' => '#f44336']);

添加<title></title>

echo $FA->get_svg('fa-solid fa-file', ['title' => 'My accessible icon']);

一次性设置多个选项

echo $FA->get_svg('fa-solid fa-file', [
    'class' => 'my-custom-class another-class',
    'default_class' => false,
    'title' => 'My title',
    'role' => 'img',
    'fill' => '#ffffff',
]);

自定义双色调图标

echo $FA->get_svg('fa-duotone fa-laugh-wink', [
    'primary' => [
        'fill'    => '#e64980',
    ],
    'secondary' => [
        'fill'    => '#fcc417',
        'opacity' => '1',
    ],
]);

双色调

需要版本5.10.0或更高，以及Font Awesome Pro许可证

锐化

需要版本6.4.0或更高，以及Font Awesome Pro许可证

echo $FA->get_svg('fa-sharp fa-light fa-file');
echo $FA->get_svg('fa-sharp fa-regular fa-file');
echo $FA->get_svg('fa-sharp fa-solid fa-file');

选项

如果启用了inline_style，则fill和opacity的值也会用于<svg>标签的行内样式。

示例

单色

echo $FA->get_svg('fad fa-laugh-wink', [
    'fill' => '#e64980',
]);

交换图层不透明度

echo $FA->get_svg('fad fa-laugh-wink', [
    'fill'  => '#e64980',
    'class' => 'fa-swap-opacity',
]);

具有自定义不透明度的单色

echo $FA->get_svg('fad fa-laugh-wink', [
    'fill' => '#e64980',
    'secondary' => [
        'opacity' => '0.2',
    ],
]);

自定义颜色和不透明度

echo $FA->get_svg('fad fa-laugh-wink', [
    'primary' => [
        'fill'    => '#e64980',
        'opacity' => '0.5',
    ],
    'secondary' => [
        'fill'    => '#fcc417',
        'opacity' => '1',
    ],
]);

别名

版本5的简写别名仍然受支持

echo $FA->get_svg('fab fa-twitter');
echo $FA->get_svg('fad fa-file');
echo $FA->get_svg('fal fa-file');
echo $FA->get_svg('far fa-file');
echo $FA->get_svg('fas fa-file');

// And the new shorthands for thin and sharp
echo $FA->get_svg('fat fa-file'); // thin
echo $FA->get_svg('fasl fa-file'); // sharp-light
echo $FA->get_svg('fasr fa-file'); // sharp-regular
echo $FA->get_svg('fass fa-file'); // sharp-solid

无障碍性

以下实现基于

• Font Awesome的无障碍性文档
• Heather Migliorisi在CSS-Tricks上的文章可访问的SVG

role属性

role="img"默认添加到SVG标签

<svg role="img"></svg>

<title>，aria-labelledby

您可以设置一个<title>，一个用于<title>的id，并将自动添加aria-labelledby属性

echo $FA->get_svg('fa-solid fa-file', [
    'title' => 'File',
    'title_id' => 'file-id',
]);

<svg aria-labelledby="file-id">
  <title id="file-id">File</title>
</svg>

aria-*属性

您可以添加任何aria-*属性到SVG标签

echo $FA->get_svg('fa-solid fa-file', [
    'aria-label' => 'File',
]);

<svg aria-label="File"></svg>

aria-hidden属性

默认添加aria-hidden="true"到SVG标签，除非设置了<title id="">（和aria-labelledby）或aria-label。

echo $FA->get_svg('fa-solid fa-file');

<svg aria-hidden="true"></svg>