diff --git a/README.md b/README.md
index 92c3c96..cc0a1eb 100644
--- a/README.md
+++ b/README.md
@@ -77,7 +77,48 @@ For valid icon names see https://fontawesome.com/v7/search.
**Example:**
`{{#fab:wikipedia-w fa-spin}}` will insert a spinning Wikipedia-W
-For valid Font Awesome class names see https://docs.fontawesome.com/web/style/styling.
+* `{{#far:...|...}}` to insert an icon from the FontAwesome Regular font with additional styling
+* `{{#fas:...|...}}` to insert an icon from the FontAwesome Solid font with additional styling
+* `{{#fab:...|...}}` to insert an icon from the FontAwesome Brands font with additional styling
+
+**Example:**
+`{{#fab:wikipedia-w|background:MistyRose;color:Tomato;}}` will insert a red Wikipedia-W on a pink background
+`{{#fab:wikipedia-w fa-rotate-by|--fa-rotate-angle:45deg;}}` will insert a 45 degrees rotated Wikipedia-W
+
+For valid Font Awesome class names and custom properties see https://docs.fontawesome.com/web/style/style-cheatsheet.
+
+### Power Transforms
+Only SVG with JavaScript render mode.
+* `{{#far:...|...|...}}` to insert an icon from the FontAwesome Regular font with Power Transforms
+* `{{#fas:...|...|...}}` to insert an icon from the FontAwesome Solid font with Power Transforms
+* `{{#fab:...|...|...}}` to insert an icon from the FontAwesome Brands font with Power Transforms
+
+**Example:**
+`{{#fab:wikipedia-w||up-6 shrink-8 }}` will insert a scaled-down and shifted-upward Wikipedia-W
+
+For valid Font Awesome Power Transforms see https://docs.fontawesome.com/web/style/power-transform
+
+### Stacking
+Some HTML code is required for stacking. Remember, in MediaWiki code, spaces and new lines do matter.
+
+**Example:**
+`{{#fas:camera fa-stack-1x}}{{#fas:ban fa-stack-2x|color:Tomato}}` will insert a no photography sign
+
+For further explanation, see https://docs.fontawesome.com/web/style/stack
+
+### Layering
+Only SVG with JavaScript render mode. Some HTML code is required for layering. Remember, in MediaWiki code, spaces and new lines do matter.
+
+**Example:**
+`{{#fas:circle|color:Tomato}}{{#fas:times fa-inverse||shrink-6}}` will insert a white X on a red circle.
+
+For further explanation, see https://docs.fontawesome.com/web/style/layer
+
+**Comprehensive example:**
+Only SVG with JavaScript render mode.
+
+`{{#fas:circle|color:Tomato}}{{#fas:times fa-inverse||shrink-6}}{{#fas:bookmark}}{{#fas:heart fa-inverse|color:Tomato|shrink-10 up-2}}{{#fas:play||rotate--90 grow-4}}{{#fas:sun fa-inverse||shrink-10 up-2}}{{#fas:moon fa-inverse||shrink-11 down-4.2 left-4}}{{#fas:star fa-inverse||shrink-11 down-4.2 right-4}}{{#fas:calendar}}27{{#fas:certificate}}NEW{{#fas:envelope}}1,419
`
+
## Professional Support
diff --git a/src/IconRenderers/JavascriptRenderer.php b/src/IconRenderers/JavascriptRenderer.php
index ed3618f..68bd32d 100644
--- a/src/IconRenderers/JavascriptRenderer.php
+++ b/src/IconRenderers/JavascriptRenderer.php
@@ -37,11 +37,16 @@
* @ingroup FontAwesome
*/
class JavascriptRenderer implements IconRenderer {
-
+ /**
+ * @var bool Tracks whether the ResourceLoader module has been registered
+ */
private bool $isModuleRegistered = false;
private string $magicWord;
+ /**
+ * @var string CSS class for the font
+ */
private string $fontClass;
public function __construct(
@@ -61,8 +66,22 @@ public function __construct(
*/
public function render( Parser $parser, PPFrame $frame, array $args ): string {
$this->registerRlModule( $parser );
+ $iconClass = 'fa-' . trim( $frame->expand( $args[0] ) );
+ $attributes = [ 'class' => [ $this->fontClass, $iconClass ] ];
+
+ if ( count( $args ) > 1 ) {
+ $style = trim( $frame->expand( $args[1] ) );
+ // Consider adding HTML sanitization for the style attribute
+ $attributes['style'] = $style;
+ }
+
+ if ( count( $args ) > 2 ) {
+ $transform = trim( $frame->expand( $args[2] ) );
+ // Consider adding validation for FontAwesome transform syntax
+ $attributes['data-fa-transform'] = $transform;
+ }
- return Html::element( 'i', [ 'class' => [ $this->fontClass, 'fa-' . trim( $frame->expand( $args[ 0 ] ) ) ] ] );
+ return Html::element( 'i', $attributes );
}
private function registerRlModule( Parser $parser ): void {
diff --git a/src/IconRenderers/WebfontRenderer.php b/src/IconRenderers/WebfontRenderer.php
index a2cb4e3..7d11c42 100644
--- a/src/IconRenderers/WebfontRenderer.php
+++ b/src/IconRenderers/WebfontRenderer.php
@@ -37,11 +37,16 @@
* @ingroup FontAwesome
*/
class WebfontRenderer implements IconRenderer {
-
+ /**
+ * @var bool Tracks whether the ResourceLoader module has been registered
+ */
private bool $isModuleRegistered = false;
private string $magicWord;
+ /**
+ * @var string CSS class for the font
+ */
private string $fontClass;
public function __construct(
@@ -61,8 +66,16 @@ public function __construct(
*/
public function render( Parser $parser, PPFrame $frame, array $args ): string {
$this->registerRlModule( $parser );
+ $iconClass = 'fa-' . trim( $frame->expand( $args[0] ) );
+ $attributes = [ 'class' => [ $this->fontClass, $iconClass ] ];
+
+ if ( count( $args ) > 1 ) {
+ $style = trim( $frame->expand( $args[1] ) );
+ // Consider adding HTML sanitization for the style attribute
+ $attributes['style'] = $style;
+ }
- return Html::element( 'i', [ 'class' => [ $this->fontClass, 'fa-' . trim( $frame->expand( $args[ 0 ] ) ) ] ] );
+ return Html::element( 'i', $attributes );
}
/**