, (*1)
This extension provides some insert tags to insert FontAwesome and individual icons., (*2)
Features
insert all FontAwesome icons
Basic Use
see https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use, (*3)
{{icon-fa*::icon-name}} , (*4)
```php+HTML
, (*5)
#### Fixed Width Icons
see https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
**``{{icon-fa*-fw::icon-name}}``** [^FontAwesome-Style]
```php+HTML
<i class="fa* fa-icon-name fa-fw" aria-hidden="true"></i>
Bordered + Pulled Icons
see https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons, (*6)
wrap text around an icon - left, (*7)
{{icon-fa*-left::icon-name}} , (*8)
```php+HTML
, (*9)
**wrap text around an icon - right**
**``{{icon-fa*-right::icon-name}}``** [^FontAwesome-Style]
```php+HTML
<i class="fa* fa-icon-name fa-2x fa-pull-right" aria-hidden="true"></i>
wrap text around an icon with border - left, (*10)
{{icon-fa*-border-left::icon-name}} , (*11)
```php+HTML
, (*12)
**wrap text around an icon with border - right**
**``{{icon-fa*-border-right::icon-name}}``** [^FontAwesome-Style]
```php+HTML
<i class="fa* fa-icon-name fa-2x fa-pull-right fa-border" aria-hidden="true"></i>
Animating Icons
see https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons, (*13)
rotate icon, (*14)
{{icon-fa*-spin::icon-name}} , (*15)
```php+HTML
, (*16)
**pulse icon**
**``{{icon-fa*-pulse::icon-name}}``** [^FontAwesome-Style]
```php+HTML
<i class="fa* fa-icon-name fa-pulse" aria-hidden="true"></i>
Rotating Icons
see https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons, (*17)
turn 90° clockwise, (*18)
{{icon-fa*-rotate-90::icon-name}} , (*19)
```php+HTML
, (*20)
**turn 180° clockwise**
**``{{icon-fa*-rotate-180::icon-name}}``** [^FontAwesome-Style]
```php+HTML
<i class="fa* fa-icon-name fa-rotate-180" aria-hidden="true"></i>
turn 270° clockwise, (*21)
{{icon-fa*-rotate-270::icon-name}} , (*22)
```php+HTML
, (*23)
**mirror icon horizontally**
**``{{icon-fa*-flip-horizontal::icon-name}}``** [^FontAwesome-Style]
```php+HTML
<i class="fa* fa-icon-name fa-flip-horizontal" aria-hidden="true"></i>
mirror icon vertically, (*24)
{{icon-fa*-flip-vertical::icon-name}} , (*25)
```php+HTML
, (*26)
**mirror icon vertically and horizontally (requires 5.7.0 or greater)**
**``{{icon-fa*-flip-both::icon-name}}``** [^FontAwesome-Style]
```php+HTML
<i class="fa* fa-icon-name fa-flip-both" aria-hidden="true"></i>
Stacked Icons
see https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons, (*27)
icon with square background, (*28)
{{icon-fa*-square::icon-name}}, (*29)
```php+HTML
, (*30)
**icon with square background - only border**
**``{{icon-fa*-square-border::icon-name}}``**
```php+HTML
<span class="fa-stack">
<i class="far fa-square fa-stack-2x" aria-hidden="true"></i>
<i class="fa* fa-icon-name fa-stack-1x" aria-hidden="true"></i>
</span>
icon with circle background, (*31)
{{icon-fa*-circle::icon-name}}, (*32)
```php+HTML
, (*33)
**icon with circle background - only border**
**``{{icon-fa*-circle-border::icon-name}}``**
```php+HTML
<span class="fa-stack">
<i class="far fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa* fa-icon-name fa-stack-1x" aria-hidden="true"></i>
</span>
icon with prohibition sign, (*34)
{{icon-fa-ban::icon-name}}, (*35)
```php+HTML
, (*36)
### insert your own icon font (you have to provide some css by your own)
**``{{icon::your-icon-name}}``**
```php+HTML
<i class="icon icon-your-icon-name" aria-hidden="true"></i>
CSS Example for your own icon font
```php+HTML
/* Include your icon font files */, (*37)
@font-face {
font-family: "Your icon font name";
src: url('your-icon-font-filename.eot') format('embedded-opentype'),
url('your-icon-font-filename.ttf') format('truetype'),
url('your-icon-font-filename.woff') format('woff'),
url('your-icon-font-filename.woff2') format('woff2'),
url('your-icon-font-filename.svg') format('svg');
}, (*38)
/* base styles for .icon */, (*39)
.icon {
font-family: "Your icon font name";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;, (*40)
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}, (*41)
/* replace individual icon */, (*42)
.icon-your-icon-1 {
&:before {
content: "\XXXX";
}
}
```, (*43)
Installation
Install the extension via composer: hofff/contao-iconfont., (*44)
If you prefer to install it manually, download the latest release here: https://github.com/hofff/contao-iconfont/releases, (*45)
Compatibility
- min. Contao version: ^4.9
- PHP min. 7.4 || 8.0
Dependency
- You have to include FontAwesome sources see https://fontawesome.com/start
Wallogit.com
