hofff / contao-iconfont
Insert tag for Contao Open Source CMS to insert FontAwesome icons and individual icons
Installs: 696
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 4
Forks: 0
Open Issues: 0
Type:contao-bundle
Requires
- php: ^8.2
- contao/core-bundle: ^4.13 || ^5.3
- symfony/config: ^5.4 || ^6.4
- symfony/dependency-injection: ^5.4 || ^6.4
- symfony/http-kernel: ^5.4 || ^6.4
Requires (Dev)
- contao/manager-plugin: ^2.1
- doctrine/coding-standard: ^12.0
- phpcq/runner-bootstrap: @dev
Conflicts
- contao/manager-plugin: <2.1 || >= 3.0
This package is auto-updated.
Last update: 2024-10-25 11:54:55 UTC
README
Contao Extension: hofff.com - Iconfont
This extension provides some insert tags to insert FontAwesome and individual icons.
Features
insert all FontAwesome icons
Basic Use
see https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
{{icon-fa*::icon-name}} 1
<i class="fa* fa-icon-name" aria-hidden="true"></i>
Fixed Width Icons
see https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
{{icon-fa*-fw::icon-name}} 1
<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
wrap text around an icon - left
{{icon-fa*-left::icon-name}} 1
<i class="fa* fa-icon-name fa-2x fa-pull-left" aria-hidden="true"></i>
wrap text around an icon - right
{{icon-fa*-right::icon-name}} 1
<i class="fa* fa-icon-name fa-2x fa-pull-right" aria-hidden="true"></i>
wrap text around an icon with border - left
{{icon-fa*-border-left::icon-name}} 1
<i class="fa* fa-icon-name fa-2x fa-pull-left fa-border" aria-hidden="true"></i>
wrap text around an icon with border - right
{{icon-fa*-border-right::icon-name}} 1
<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
rotate icon
{{icon-fa*-spin::icon-name}} 1
<i class="fa* fa-icon-name fa-spin" aria-hidden="true"></i>
pulse icon
{{icon-fa*-pulse::icon-name}} 1
<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
turn 90° clockwise
{{icon-fa*-rotate-90::icon-name}} 1
<i class="fa* fa-icon-name fa-rotate-90" aria-hidden="true"></i>
turn 180° clockwise
{{icon-fa*-rotate-180::icon-name}} 1
<i class="fa* fa-icon-name fa-rotate-180" aria-hidden="true"></i>
turn 270° clockwise
{{icon-fa*-rotate-270::icon-name}} 1
<i class="fa* fa-icon-name fa-rotate-270" aria-hidden="true"></i>
mirror icon horizontally
{{icon-fa*-flip-horizontal::icon-name}} 1
<i class="fa* fa-icon-name fa-flip-horizontal" aria-hidden="true"></i>
mirror icon vertically
{{icon-fa*-flip-vertical::icon-name}} 1
<i class="fa* fa-icon-name fa-flip-vertical" aria-hidden="true"></i>
mirror icon vertically and horizontally (requires 5.7.0 or greater)
{{icon-fa*-flip-both::icon-name}} 1
<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
icon with square background
{{icon-fa*-square::icon-name}}
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x" aria-hidden="true"></i>
<i class="fa* fa-icon-name fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
icon with square background - only border
{{icon-fa*-square-border::icon-name}}
<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
{{icon-fa*-circle::icon-name}}
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x" aria-hidden="true"></i>
<i class="fa* fa-icon-name fa-stack-1x fa-inverse" aria-hidden="true"></i>
</span>
icon with circle background - only border
{{icon-fa*-circle-border::icon-name}}
<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
{{icon-fa-ban::icon-name}}
<span class="fa-stack">
<i class="fa* fa-icon-name fa-stack-1x" aria-hidden="true"></i>
<i class="fas fa-ban fa-stack-2x" aria-hidden="true"></i>
</span>
insert your own icon font (you have to provide some css by your own)
{{icon::your-icon-name}}
<i class="icon icon-your-icon-name" aria-hidden="true"></i>
CSS Example for your own icon font
/* Include your icon font files */
@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');
}
/* base styles for .icon */
.icon {
font-family: "Your icon font name";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* replace individual icon */
.icon-your-icon-1 {
&:before {
content: "\XXXX";
}
}
Installation
Install the extension via composer: hofff/contao-iconfont.
If you prefer to install it manually, download the latest release here: https://github.com/hofff/contao-iconfont/releases
Compatibility
- min. Contao version: ^4.9
- PHP min. 7.4 || 8.0
Dependency
- You have to include FontAwesome sources see https://fontawesome.com/start