PHPackages                             contao-themes-net/font-awesome-inserttag-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. contao-themes-net/font-awesome-inserttag-bundle

ActiveContao-bundle[Utility & Helpers](/categories/utility)

contao-themes-net/font-awesome-inserttag-bundle
===============================================

Font Awesome Inserttag Bundle for Contao 4 and 5

1.1.4(1mo ago)14.0k↑92.9%1LGPL-3.0-or-laterSCSSPHP ^7.4 || ^8.0

Since Oct 8Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/contao-themes-net/font-awesome-inserttag-bundle)[ Packagist](https://packagist.org/packages/contao-themes-net/font-awesome-inserttag-bundle)[ Fund](https://contao-themes.net/sponsoring.html)[ Patreon](https://www.patreon.com/user?u=28241718)[ RSS](/packages/contao-themes-net-font-awesome-inserttag-bundle/feed)WikiDiscussions main Synced 3d ago

READMEChangelog (6)Dependencies (10)Versions (8)Used By (1)

Font Awesome Inserttag Bundle
=============================

[](#font-awesome-inserttag-bundle)

Dieses Bundle installiert einen InsertTag, mit dessen Hilfe Font Awesome Icons als Font oder via SVG in Contao genutzt werden können.

### About Font Awesome

[](#about-font-awesome)

The full suite of pictographic icons, examples, and documentation can be found at:

License

- The Font Awesome font is licensed under the SIL Open Font License -
- Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
- The Font Awesome pictograms are licensed under the CC BY 3.0 License -
- Attribution is no longer required in Font Awesome 3.0, but much appreciated: "Font Awesome by Dave Gandy - "

### Allgemeine Form des Tags

[](#allgemeine-form-des-tags)

Das Tag beginnt mit dem Prefix `fa ` und ihm folgen **drei weitere** Parameter. Parameter 1 und 2 sind erforderlich, Parameter 3 und 4 sind optional und können auch weggelassen werden. Das Tag besteht also insgesamt aus 4 Parametern. Die allgemeine Form sieht so aus:

```
{{fa::name::classes::styles}}
{{fa-brands::name::classes::styles}}
{{fa-regular::name::classes::styles}}
{{fa-solid::name::classes::styles}}

```

### Der erste Parameter »fa«

[](#der-erste-parameter-fa)

...ist konstant und kennzeichnet das Tag.

### Der zweite Parameter »name«

[](#der-zweite-parameter-name)

...muss durch den Namen des Icons ersetzt werden. Dabei sollte der Name des Icons verwendet werden, wie er auf der Seite **Font Awesome Icons** angegeben ist: [https://fontawesome.com/search?m=free&o=r](https://fontawesome.com/search?m=free&o=r) - also ohne Prefix `fa-`!

**Beispiel:**

```
{{fa-solid::check}}

```

### Der dritte Parameter »classes«

[](#der-dritte-parameter-classes)

...**kann** (ist optional) eine oder mehrere CSS-Klassen-Namen enthalten. Für das Bereitstellen der Klasse müssen die Administratorinnen und Administratoren selbst Sorge tragen. Mehrere Klassen-Namen können wie im class-Attribute eines HTML-Tags notiert werden - also auch durch Leerzeichen getrennt.

**Beispiel:**

```
{{fa-solid::check::class1 class2 class3}}

```

**Achtung!**Die Vordergrundfarbe (color) kann für ein SVG-Element als Bild nicht durch das style-Attribute gesetzt werden!

### Der vierte Parameter »styles«

[](#der-vierte-parameter-styles)

...**kann** (ist optional) eine oder mehrere Style-Angaben enthalten.

**Beispiel:**

```
// for svg (svg: true)
{{fa-solid::check::fa-spin fa-3x fa-fw::width:50px;background-color:orangered;border-radius: 50px;}}

// for icon font
{{fa-solid::check::fa-spin fa-3x fa-fw::font-size:3em;background-color:orangered;border-radius: 50px;}}

```

### Konfiguration

[](#konfiguration)

Das Font Awesome Inserttag Bundle kann mit der **parameters.yml** konfiguriert werden. Diese wird wie folgt mitgeliefert:

```
parameters:
    font_awesome_config:
        local_source: ''
        use:
            icon_font: true
            svg: false
            svg_sprites: false
            js: false
            css: true

```

Die Konfiguration befindet sich unterhalb des Schlüssels `font_awesome_config`.

Zurzeit werden dort zwei Schlüssel ausgewertet. Der Schlüssel `use` und `local_source`.

### use

[](#use)

Mit dem Schlüssel `use` können die Darstellungsmethoden der Icons festgelegt werden. Fallback ist `icon_font: true`.

Soll statt der Icon-Font die Methode SVG als Bild zum Einsatz kommen, so muss `icon_font: false` und `svg: true` gesetzt sein. Es werden nun img-Tags ausgegeben.

Mittels `svg_sprites: true` und `svg: false` werden die Icons als [SVG-Sprites](https://fontawesome.com/docs/web/add-icons/svg-sprites) eingebunden.

Soll die Generierung der SVG Tags per Javascript erfolgen, kannst du zu `svg: true` zusätzlich `js: true` nutzen.

Über `css: false` lässt sich das automatische Laden der Font Awesome CSS-Datei deaktivieren. Wenn ausschließlich SVG-Icons genutzt werden, ist das CSS in der Regel nicht erforderlich (standardmäßig aktiviert).

Beispiele:

**Icon Font**

```

```

**SVG als Bild**

```

```

**SVG-Sprites**

```

```

**SVG + JavaScript**

```

```

### local\_source

[](#local_source)

Über `local_source: 'files/dein-pfad-zum-fontawesome-ordner'` kannst du den Pfad zu Font Awesome anpassen, um zum Beispiel die Pro-Variante oder eine andere Font Awesome Version einzubinden. Gib dazu den kompletten Pfad ab files zum Font Awesome Ordner, wo die Ordner css, js, svgs usw. enthalten sind, an.

---

Font Awesome Inserttag
======================

[](#font-awesome-inserttag)

This bundle installs an InsertTag that allows Font Awesome icons to be used as a font or via SVG in Contao.

### General form of the tag

[](#general-form-of-the-tag)

The tag starts with the prefix `fa ` and it is followed by **three more** parameters. Parameters 1 and 2 are required, parameters 3 and 4 are optional and can be omitted. So the tag consists of a total of 4 parameters. The general form looks like this:

```
{{fa::name::classes::styles}}
{{fa-brands::name::classes::styles}}
{{fa-regular::name::classes::styles}}
{{fa-solid::name::classes::styles}}

```

### The first parameter »fa«

[](#the-first-parameter-fa)

...is constant and identifies the tag.

### The second parameter »name«

[](#the-second-parameter-name)

...must be replaced by the name of the icon. The name of the icon should be used as shown on the **Bootstrap Icons** page:  - that is, without the `fa-` prefix!

**Example:**

```
{{fa-solid::check}}

```

### The third parameter »classes«

[](#the-third-parameter-classes)

...**may** (is optional) contain one or more CSS class names. The administrators must take care of providing the class themselves. Multiple class names can be noted as in the class attribute of an HTML tag - i.e. also separated by spaces.

**Example:**

```
{{fa-solid::check::class1 class2 class3}}

```

### The fourth parameter »styles«

[](#the-fourth-parameter-styles)

...**may** (is optional) contain one or more style statements.

**Example:**

```
// for svg (svg: true)
{{fa-solid::check::fa-spin fa-3x fa-fw::width:50px;background-color:orangered;border-radius: 50px;}}

// for icon font
{{fa-solid::check::fa-spin fa-3x fa-fw::font-size:3em;background-color:orangered;border-radius: 50px;}}

```

### Configuration

[](#configuration)

The Font Awesome Inserttag Bundle can be configured using **parameters.yml**. This is supplied as follows:

```
parameters:
    font_awesome_config:
        local_source: ''
        use:
            icon_font: true
            svg: false
            svg_sprites: false
            js: false
            css: true

```

The configuration is located below the `font_awesome_config` key.

Currently, two other keys are evaluated there. The `local_source` key and the `use` key.

### use

[](#use-1)

The `use` key can be used to define the four display methods of the icons. Fallback is `icon_font: true`.

If the SVG as image method is to be used instead of the icon font, `icon_font: false` and `svg: true` must be set. Now img tags will be output.

Using `svg_sprites: true` and `svg: false` you can use icons included as [svg sprites](https://fontawesome.com/docs/web/add-icons/svg-sprites).

If you want the SVG tags to be generated by Javascript, you can use `svg: true` and `js: true`. in addition.

Using `css: false`, the automatic loading of the Font Awesome CSS file can be disabled. If only SVG icons are used, the CSS is usually not required (enabled by default).

Examples:

**Icon Font**

```

```

**SVG as image**

```

```

**SVG Sprites**

```

```

**SVG + JavaScript**

```

```

###  Health Score

48

—

FairBetter than 93% of packages

Maintenance90

Actively maintained with recent releases

Popularity23

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 56% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~262 days

Recently: every ~310 days

Total

6

Last Release

53d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/10244240?v=4)[Mathias Arzberger](/maintainers/MDevster)[@MDevster](https://github.com/MDevster)

---

Top Contributors

[![seibtph](https://avatars.githubusercontent.com/u/17127525?v=4)](https://github.com/seibtph "seibtph (14 commits)")[![MDevster](https://avatars.githubusercontent.com/u/10244240?v=4)](https://github.com/MDevster "MDevster (11 commits)")

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/contao-themes-net-font-awesome-inserttag-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/contao-themes-net-font-awesome-inserttag-bundle/health.svg)](https://phpackages.com/packages/contao-themes-net-font-awesome-inserttag-bundle)
```

###  Alternatives

[metamodels/core

MetaModels core

10156.4k68](/packages/metamodels-core)[codefog/contao-news_categories

News Categories bundle for Contao Open Source CMS

3189.0k6](/packages/codefog-contao-news-categories)[terminal42/contao-node

Node bundle for Contao Open Source CMS

3177.0k6](/packages/terminal42-contao-node)[markocupic/calendar-event-booking-bundle

Contao Calendar Event Booking Bundle

135.2k1](/packages/markocupic-calendar-event-booking-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)