Documentation for fontawesome-builder

Folder Structure

The library has 3 folders and one base class the includes all the static methods for the font icons creation.

Enum - Collection of constants that be used
Models - The main helper class to create font-icons
Traits - Generic helper classes

The below examples will use the variable $faIcon which is a instance of faIcon model

$faIcon = new \FontAwesomeBuilder\Models\FaIcon();

To initialize the creation of new icon call the method create

$faIcon->create();

To set the default collection and tag that will be used for the icons set it to model initialization

$faIcon = new \FontAwesomeBuilder\Models\FaIcon(['tag' => 'i', 'collection' => FontAwesomeCollectionEnum::SOLID ]);

To change the tag and the collection on the fly

$faIcon->create()->tag('span')->regular() or ->solid() or ->brand() or ->light()

Basic Use

Code in PHP

                                                
echo $faIcon->create()->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->create()->tag('span')->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->create()->brand()->icon(FontAwesomeClassEnum::FONT_AWESOME);

HTML Result


<i class="fas fa-stroopwafel"></i>
<span class="fas fa-stroopwafel"></span>
<i class="fab fa-font-awesome"></i>

Sizing Icons

Code in PHP


echo $faIcon->create()->size(FontSizeEnum::XS)->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->size(FontSizeEnum::SM)->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->size(FontSizeEnum::LG)->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->size(FontSizeEnum::X2)->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->size(FontSizeEnum::X3)->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->size(FontSizeEnum::X5)->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->size(FontSizeEnum::X7)->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo $faIcon->size(FontSizeEnum::X10)->icon(FontAwesomeClassEnum::STROOPWAFEL);

HTML Result


<i class="fas fa-stroopwafel fa-xs"></i>
<i class="fas fa-stroopwafel fa-sm"></i>
<i class="fas fa-stroopwafel fa-lg"></i>
<i class="fas fa-stroopwafel fa-2x"></i>
<i class="fas fa-stroopwafel fa-3x"></i>
<i class="fas fa-stroopwafel fa-5x"></i>
<i class="fas fa-stroopwafel fa-7x"></i>
<i class="fas fa-stroopwafel fa-10x"></i>

Fixed-Width Icons

Home

Info

Library

Applications

Settings

Code in PHP


echo '<div style="font-size: 2rem;">';
echo $faIcon->create()
	->wrapped('div')
    ->fixed()
	->style('background:MistyRose')
	->text(' Home')
	->icon(FontAwesomeClassEnum::HOME);
echo $faIcon->create()
	->wrapped('div')
	->fixed()
	->style('background:MistyRose')
	->text(' Info')
	->icon(FontAwesomeClassEnum::INFO);
echo $faIcon->create()
	->wrapped('div')
	->fixed()
	->style('background:MistyRose')
	->text(' Library')
	->icon(FontAwesomeClassEnum::BOOK);
echo $faIcon->create()
	->wrapped('div')
	->fixed()
	->style('background:MistyRose')
	->text(' Applications')
	->icon(FontAwesomeClassEnum::PENCIL_ALT);
echo $faIcon->create()
	->wrapped('div')
	->fixed()
	->style('background:MistyRose')
	->text(' Settings')
	->icon(FontAwesomeClassEnum::COG);
echo '</div>';

HTML Result


<div style="font-size: 2rem;">
    <div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
    <div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
    <div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
    <div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
    <div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>
</div>

Rotating Icons

Code in PHP


echo '<div class="fa-4x">';
echo $faIcon->create()->brand()->icon(FontAwesomeClassEnum::FONT_AWESOME);
echo $faIcon->rotate(FaRotateEnum::ROTATE_90)->icon(FontAwesomeClassEnum::FONT_AWESOME);
echo $faIcon->rotate(FaRotateEnum::ROTATE_180)->icon(FontAwesomeClassEnum::FONT_AWESOME);
echo $faIcon->rotate(FaRotateEnum::ROTATE_270)->icon(FontAwesomeClassEnum::FONT_AWESOME);
echo $faIcon->rotate(FaRotateEnum::ROTATE_FLIP_HORIZONTAL)->icon(FontAwesomeClassEnum::FONT_AWESOME);
echo $faIcon->rotate(FaRotateEnum::ROTATE_FLIP_VERTICAL)->icon(FontAwesomeClassEnum::FONT_AWESOME);
echo '</div>';

HTML Result


<div class="fa-4x">
    <i class="fab fa-font-awesome"></i>
    <i class="fab fa-font-awesome fa-rotate-90"></i>
    <i class="fab fa-font-awesome fa-rotate-180"></i>
    <i class="fab fa-font-awesome fa-rotate-270"></i>
    <i class="fab fa-font-awesome fa-flip-horizontal"></i>
    <i class="fab fa-font-awesome fa-flip-vertical"></i>
</div>

Animating Icons

Code in PHP


echo '<div class="fa-3x">';
echo $faIcon->create()->animate()->icon(FontAwesomeClassEnum::CIRCLE_NOTCH);
echo $faIcon->icon(FontAwesomeClassEnum::SYNC);
echo $faIcon->icon(FontAwesomeClassEnum::COG);
echo $faIcon->icon(FontAwesomeClassEnum::SPINNER);
echo $faIcon->icon(FontAwesomeClassEnum::STROOPWAFEL);
echo '</div>';

HTML Result


<div class="fa-3x">
    <i class="fas fa-spinner fa-spin"></i>
    <i class="fas fa-circle-notch fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-cog fa-spin"></i>
    <i class="fas fa-spinner fa-spin"></i>
    <i class="fas fa-stroopwafel fa-spin"></i>
</div>

Bordered + Pulled Icons

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Code in PHP


$text = 'Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.';
echo $faIcon->create()->size(FontSizeEnum::X2)->left()->text($text)->icon(FontAwesomeClassEnum::QUOTE_LEFT);

HTML Result


<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Code in PHP


$text = 'Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.';
echo $faIcon->create()->size(FontSizeEnum::X2)->right()->bordered()->text($text)->icon(FontAwesomeClassEnum::ARROW_RIGHT);

HTML Result


<i class="fas fa-arrow-right fa-2x fa-pull-right fa-border"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Stacking Icons

Code in PHP


$icons = [
        FontAwesomeClassEnum::SQUARE,
        FontAwesomeClassEnum::TWITTER
];
$options = [
        'size' => FontSizeEnum::X2,
        'icon1' => ['collection' => FontAwesomeCollectionEnum::SOLID],
        'icon2' => ['collection' => FontAwesomeCollectionEnum::BRAND, 'class' => 'fa-inverse']
];
echo \FontAwesomeBuilder\FontAwesomeBuilder::stackIcons($icons, $options);
OR
echo $faIcon->stackIcons($icons, $options);

HTML Result


<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

Power Transforms - Scaling

Code in PHP


echo '<div class="fa-4x">';
echo $faIcon->create()->solid()->shrink(8)->style('background:MistyRose')->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->grow(6)->icon(FontAwesomeClassEnum::MAGIC);
echo '</div>';

HTML Result


<div class="fa-4x">
    <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-magic" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

Power Transforms - Positioning

Code in PHP


echo '<div class="fa-4x">';
echo $faIcon->create()->solid()->style('background:MistyRose')->shrink(8)->positionUp(6)->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->shrink(8)->positionRight(6)->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->shrink(8)->positionDown(6)->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->shrink(8)->positionLeft(6)->icon(FontAwesomeClassEnum::MAGIC);
echo '</div>';

HTML Result


<div class="fa-4x">
    <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

Power Transforms - Rotating & Flipping

Code in PHP


echo '<div class="fa-4x">';
echo $faIcon->create()->solid()->style('background:MistyRose')->rotate(FaRotateEnum::ROTATE_90)->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->rotate(FaRotateEnum::ROTATE_180)->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->rotate(FaRotateEnum::ROTATE_270)->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->rotate(FaRotateEnum::ROTATE_FLIP_HORIZONTAL)->icon(FontAwesomeClassEnum::MAGIC);
echo $faIcon->create()->solid()->style('background:MistyRose')->rotate(FaRotateEnum::ROTATE_FLIP_VERTICAL)->icon(FontAwesomeClassEnum::MAGIC);
echo '</div>';

HTML Result

Masking Icons

Code in PHP


echo '<div class="fa-4x">';
echo $faIcon->create()->solid()->style('background:MistyRose')->shrink(10)->positionUp(.5)
    ->mask(FontAwesomeCollectionEnum::SOLID, FontAwesomeClassEnum::COMMENT)->icon(FontAwesomeClassEnum::PENCIL_ALT);
echo $faIcon->create()->brand()->style('background:MistyRose')->shrink(3.5)->positionComplex(null, 1.25, 1.6, null)
	->mask(FontAwesomeCollectionEnum::SOLID, FontAwesomeClassEnum::CIRCLE)->icon(FontAwesomeClassEnum::FACEBOOK_F);
echo $faIcon->create()->solid()->style('background:MistyRose')->shrink(6)
	->mask(FontAwesomeCollectionEnum::SOLID, FontAwesomeClassEnum::SQUARE)->icon(FontAwesomeClassEnum::HEADPHONES);
echo '</div>';

HTML Result


<div class="fa-4x">
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
    <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
    <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>

Layering, Text and Counters

Under development, schedule for next release