[extension] thoulah/yii2-fontawesome-inline

Inline Font Awesome icons for Yii2 ¶

1. Installation
2. Configuration Options
3. Default Usage
4. Additional Usage: ActiveForm
5. Status

This extension provides a simple function for Yii framework 2.0 applications to add Font Awesome icons inline without the use of JavaScript.

Installation ¶

The preferred way to install this extension is through composer.

Either run

composer require thoulah/yii2-fontawesome-inline

or add

"thoulah/yii2-fontawesome-inline": "^1.1"

to the require section of your composer.json file.

Configuration Options ¶

Global Options and Default Configuration ¶

• defaultFill string currentColor. Color of the icon
• defaultStyle string solid. See Font Awesome – Usable for Font Awesome Pro
• fallbackIcon string @vendor/fortawesome/font-awesome/svgs/solid/question-circle.svg. Backup icon in case requested icon cannot be found
• fontAwesomeFolder string @vendor/fortawesome/font-awesome/svgs. Path to your Font Awesome installation – Usable for Font Awesome Pro
• prefix string svg-inline--fa. CSS class name, requires custom CSS if changed

Input Group Specific Global Options ¶

• defaultAppend bool false. Set to true to append
• defaultGroupSize bool|string false. Set to sm for small or lg for large

Individual Icon Options ¶

• name string. Name of the icon, picked from Icons
• style string. Style of the icon, must match name
• class string. Additional custom classes.
• fill string. Color of the icon
• height int. The height of the icon. This will override height and width classes.
• prefix string. CSS class name, requires custom CSS if changed
• title string. Sets a title to the SVG output

Input Group Specific Individiual Options ¶

• append bool false. Set to true to append
• fixedWidth bool true. Set to false to have variable width icons
• groupSize bool|string false. Set to sm for small or lg for large

Default Usage ¶

Option 1 – Class ¶

$icon = new \thoulah\fontawesome\Icon();
echo $icon->show('at');
echo $icon->show('github', ['style' => 'brands', 'fill' => '#003865']);
echo $icon->show('font-awesome', ['class' => 'yourClass', 'style' => 'brands']);

Option 2 – Widget ¶

use thoulah\fontawesome\Icon;
echo Icon::widget(['name' => 'at']);
echo Icon::widget(['name' => 'github', 'options' => ['style' => 'brands', 'fill' => '#003865']]);

echo Icon::widget([
	'name' => 'font-awesome',
	'options' => [
		'class' => 'yourClass',
		'style' => 'brands'
	],
]);

Option 3 – Module ¶

This is the preferred method if you need to override any of the default options ¶

Add Icon as module to your Yii config file: `php 'modules' => [

'icon' => [
	'class' => thoulah\fontawesome\Icon::class,
]

] `

Now you can globally insert an icon: `php echo Yii::$app->icon->show('at'); echo Yii::$app->icon->show('github', ['style' => 'brands', 'fill' => '#003865']); echo Yii::$app->icon->show('font-awesome', ['class' => 'yourClass', 'style' => 'brands']); `

Additional Usage: ActiveForm ¶

It is also possible to use the icons in forms as described on the Bootstrap Input group page.

Manually ¶

$icon = new \thoulah\fontawesome\Icon();
$form = ActiveForm::begin();

echo $form->field($model, 'field', [
	'inputTemplate' => $icon->activeFieldAddon('user'),
]);

ActiveForm::end();

$form = ActiveForm::begin();

echo $form->field($model, 'field', [
	'inputTemplate' => '<div id="yourClass" class="float-right">YourText</div>'.$icon->activeFieldAddon('font-awesome', ['style' => 'brands']),
]);

ActiveForm::end();

$form = ActiveForm::begin();

echo $form->field($model, 'field', [
	'inputTemplate' => '<div class="input-group">YourText'.$icon->activeFieldIcon('font-awesome', ['style' => 'brands']).'{input}</div>',
]);

ActiveForm::end();

Automatically ¶

use thoulah\fontawesome\bootstrap4\ActiveForm;

$form = ActiveForm::begin();

echo $form->field($model, 'field1', [
	'icon' => 'user',
]);

echo $form->field($model, 'field2', [
	'icon' => [
		'name' => 'github',
		'style' => 'brands',
		'class' => 'yourClass',
		'direction' => 'append',
		'fill' => '#003865',
		'groupsize' => 'sm',
		'title' => 'Your Title',
	],
]);

ActiveForm::end();

Status ¶