From 349978b7f6d1f406887207c41be3dd8607606fbd Mon Sep 17 00:00:00 2001 From: Nicky Hoff Date: Wed, 20 Mar 2019 10:46:37 +0100 Subject: [PATCH] update readme and add all posibilities using icons --- README.md | 222 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 190 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 0310416..7089ffc 100644 --- a/README.md +++ b/README.md @@ -9,61 +9,220 @@ This extension provides some insert tags to insert FontAwesome and individual ic ## Features -###insert all FontAwesome icons (you have to include components/font-awesome) - -**``{{icon-fa::fa-icon-name}}``** +### insert all FontAwesome icons +#### Basic Use + +see https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use + +**``{{icon-fa*::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + ``` - + +#### 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 + ``` -**``{{icon-fa-square-o::fa-icon-name}}``** +#### 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}}``** [^FontAwesome-Style] + + +```php+HTML + ``` - - - - + +**wrap text around an icon - right** + +**``{{icon-fa*-right::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + ``` -**``{{icon-fa-circle::fa-icon-name}}``** +**wrap text around an icon with border - left** + +**``{{icon-fa*-border-left::icon-name}}``** [^FontAwesome-Style] + +```php+HTML + ``` - - - - + +**wrap text around an icon with border - right** + +**``{{icon-fa*-border-right::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + +``` + +#### Animating Icons + +see https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons + +**rotate icon** + +**``{{icon-fa*-spin::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + +``` + +**pulse icon** + +**``{{icon-fa*-pulse::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + +``` + +#### Rotating Icons + +see https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons + +**turn 90° clockwise** + +**``{{icon-fa*-rotate-90::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + +``` + +**turn 180° clockwise** + +**``{{icon-fa*-rotate-180::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + +``` + +**turn 270° clockwise** + +**``{{icon-fa*-rotate-270::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + ``` -**``{{icon-fa-square::fa-icon-name}}``** +**mirror icon horizontally** +**``{{icon-fa*-flip-horizontal::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + ``` - - - + +**mirror icon vertically** + +**``{{icon-fa*-flip-vertical::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + +``` + +**mirror icon vertically and horizontally (requires 5.7.0 or greater)** + +**``{{icon-fa*-flip-both::icon-name}}``** [^FontAwesome-Style] + + +```php+HTML + +``` + +#### Stacked Icons + +see https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons + +**icon with square background** + +**``{{icon-fa*-square::icon-name}}``** + +```php+HTML + + + ``` -**``{{icon-fa-ban::fa-icon-name}}``** +**icon with square background - only border** +**``{{icon-fa*-square-border::icon-name}}``** + +```php+HTML + + + + ``` - - - + +**icon with circle background** + +**``{{icon-fa*-circle::icon-name}}``** + +```php+HTML + + + ``` -###insert your own icon font (you have to provide some css by your own) +**icon with circle background - only border** -**``{{icon::<>}}``** +**``{{icon-fa*-circle-border::icon-name}}``** +```php+HTML + + + + ``` - + +**icon with prohibition sign** + +**``{{icon-fa-ban::icon-name}}``** + +```php+HTML + + + + ``` -##CSS Example for your own icon font +### insert your own icon font (you have to provide some css by your own) +**``{{icon::your-icon-name}}``** + +```php+HTML + ``` + +## CSS Example for your own icon font + +```php+HTML /* Include your icon font files */ @font-face { @@ -84,7 +243,6 @@ This extension provides some insert tags to insert FontAwesome and individual ic font-weight: normal; font-variant: normal; text-transform: none; - line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; @@ -109,12 +267,12 @@ If you prefer to install it manually, download the latest release here: https:// ## Compatibility -- min. Contao version: >= 3.2.0 -- max. Contao version: < 3.6.0 - +- min. Contao version: >= 3.5.0 +- max. Contao version: 4.* ## Dependency -This extension is dependent on the following extensions: +- You have to include FontAwesome sources see https://fontawesome.com/start + +[^FontAwesome-Style]: The `*` should be replaced with the FontAwesome-Style you want: fas=[Solid](https://fontawesome.com/icons?s=solid), far=[Regular](https://fontawesome.com/icons?s=regular), fal=[Light](https://fontawesome.com/icons?s=light) or fab=[Brands](https://fontawesome.com/icons?s=brands) -- [components/font-awesome](https://packagist.org/packages/components/font-awesome)