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.3(1y ago)13.7k↓25%1LGPL-3.0-or-laterCSSPHP ^7.4 || ^8.0

Since Oct 8Pushed 1y ago2 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 1mo ago

READMEChangelog (5)Dependencies (5)Versions (7)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

```

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.

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

```

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.

Examples:

**Icon Font**

```

```

**SVG as image**

```

```

**SVG Sprites**

```

```

**SVG + JavaScript**

```

```

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance42

Moderate activity, may be stable

Popularity23

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 54.5% 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 ~186 days

Total

5

Last Release

572d 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 (12 commits)")[![MDevster](https://avatars.githubusercontent.com/u/10244240?v=4)](https://github.com/MDevster "MDevster (10 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

[codefog/contao-haste

haste extension for Contao Open Source CMS

42650.8k139](/packages/codefog-contao-haste)[madeyourday/contao-rocksolid-custom-elements

Create your own, nestable content elements using a modular system. End the WYSIWYG chaos with your own content elements.

50341.9k12](/packages/madeyourday-contao-rocksolid-custom-elements)[codefog/contao-news_categories

News Categories bundle for Contao Open Source CMS

3183.3k6](/packages/codefog-contao-news-categories)[terminal42/contao-folderpage

Provides a new page type for Contao that allows you to group pages into folders.

18147.9k9](/packages/terminal42-contao-folderpage)[inspiredminds/contao-wowjs

Integrates WOW.js for Contao content elements and form fields.

1813.0k](/packages/inspiredminds-contao-wowjs)[inspiredminds/contao-glightbox

Contao extension to integrate GLightbox.

1223.3k1](/packages/inspiredminds-contao-glightbox)

PHPackages © 2026

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