Font Awesome Field Type

$20.00
In stock
SKU
font-awesome-field-type

A fontawesome dropdown field type.

The fontawesome field type provides a dropdown input of current font awesome icons.

Versions
$20.00

Font Awesome Field Type

emange.field_type.fontawesome

A fontawesome dropdown field type.

The fontawesome field type provides a dropdown input of current font awesome icons.

Usage

Setting Values

You must set the fontawesome field type value with a valid font awesome icon code from the available options.

$entry->example = "car";

Basic Output

The fontawesome field type returns null or the selected Font Awesome code.

$entry->example; // fa-car

Presenter Output

When accessing the value from a decorated entry, like one in a view, the fontawesome field type presenter is returned instead. The default will return the HTML markup for the icon.

`{{ entry.example }}` // <i class="fa fa-car" />

Name

You can also get the selected icons name.

`{{ entry.example.name }} // car

Code

Return the selected font awesome's icon code.

`{{ entry.example.code }}` // fa-car

Unicode

Return the selected icons unicode.

`{{ entry.example.unicode }}` // &#xf1b9;

The below methods can all be chained together to modify your icon

`{{ entry.example.size('2x').spin.inverse }}` // <i class="fa fa-inverse fa-spin fa-car fa-2x" />

Size

Change the icons size

`{{ entry.example.size('2x') }}` // <i class="fa fa-car fa-2x" /> `{{ entry.example.size('lg') }}` // <i class="fa fa-car fa-lg" />

Fixed_width

Set make the icon have a fixed width

`{{ entry.example.fixed_width }} // <i class="fa fa-car fa-fw" />

Spin

Make the icon sping

`{{ entry.example.spin }}` // <i class="fa fa-car fa-spin" />

Pulse

Make the icon pulse

`{{ entry.example.pulse }}` // <i class="fa fa-car fa-pulse" />

Stack

Stack icons

`{{ entry.example.stack('lg') }}` // <i class="fa fa-car fa-stack-lg" /> `{{ entry.example.stack('2x') }}` // <i class="fa fa-car fa-stack-2x" />

Rotate

Rotate the icon

`{{ entry.example.rotate(90) }}` // <i class="fa fa-car fa-rorate-90" />

Inverse

Inverse the icons colour

`{{ entry.example.inverse }}` // <i class="fa fa-car fa-inverse" />

Border

Set a border around the icon

`{{ entry.example.border }}` // <i class="fa fa-car fa-border" />

Pull_right

Pull the icon to the right

`{{ entry.example.pull_right }}` // <i class="fa fa-car fa-pull-right" />

Pull_left

Pull the icon to the left

`{{ entry.example.pull_left }}` // <i class="fa fa-car fa-pull-left" />

is_list

Replace bullets with the icon

`{{ entry.example.is_list }}` // <i class="fa fa-car fa-li" />

flip_horizontal

Flip the icon horizontally

`{{ entry.example.flip_horizontal }}` // <i class="fa fa-car fa-flip-horizontal" />

flip_vertical

Flip the icon vertically
{{ entry.example.flip_vertical }} //

Write Your Own Review
You're reviewing:Font Awesome Field Type
Your Rating
Copyright © 2016 PyroCMS. All rights reserved.