<blockquote class="text-muted text-center mb-5">
<div class="display-5 fw-normal">inline</div>
<div class="fs-4 fst-italic text-body-secondary">/ˈɪnlʌɪn/</div>
<div class="fst-italic small fw-semibold">adjective</div>
<p class="lead fst-italic mt-3 mb-0">
included as part of the main text on a page, rather than in a separate section
</p>
</blockquote>
<p>
This extension provides simple functions for <a href="http://www.yiiframework.com/">Yii
framework 2.0</a> applications to add <a href="https://fontawesome.com/">Font
Awesome</a> <a href="https://fontawesome.com/icons">Icons</a> inline
<strong><em>without the use of JavaScript</em></strong>.
</p>
<h3 class="fw-bolder mb-2">Options</h3>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<code>bootstrap</code> <span class="font-monospace">( string = 'bootstrap4' )</span>
Bootstrap namespace to use – Currently the only supported option
</li>
<li class="list-group-item">
<code>fill</code> <span class="font-monospace">( string = 'currentColor' )</span>
Color of the icon. Set to empty string to disable this attribute
</li>
<li class="list-group-item">
<code>fixedWidth</code> <span class="font-monospace">( bool = false )</span>
Set to <code>true</code> to have fixed width icons
</li>
<li class="list-group-item">
<code>style</code> <span class="font-monospace">( string = 'solid' )</span>
See <a href="https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use">Referencing
Icons</a>. Usable for Font Awesome Pro
</li>
<li class="list-group-item">
<code>fallbackIcon</code> <span class="font-monospace">( string = '@vendor/fortawesome/font-awesome/svgs/solid/question-circle.svg' )</span>
Backup icon in case requested icon cannot be found
</li>
<li class="list-group-item">
<code>fontAwesomeFolder</code> <span class="font-monospace">( string = '@vendor/fortawesome/font-awesome/svgs' )</span>
Path to your Font Awesome installation. Usable for Font Awesome Pro
</li>
<li class="list-group-item">
<code>prefix</code> <span class="font-monospace">( string = 'svg-inline--fa' )</span>
CSS class basename, requires custom CSS if changed
</li>
<li class="list-group-item">
<code>registerAssets</code> <span class="font-monospace">( bool = true )</span>
Whether or not to register the Font Awesome assets
</li>
</ul>
<h3 class="fw-bolder mb-2">ActiveForm Specific Global Options</h3>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<code>ActiveFormFixedWidth</code> <span class="font-monospace">( bool = true )</span>
Set to <code>false</code> to have variable width icons. Overrules <code>fixedWidth</code>
</li>
<li class="list-group-item">
<code>append</code> <span class="font-monospace">( bool = false )</span>
Whether to prepend or append the <code>input-group</code>
</li>
<li class="list-group-item">
<code>groupSize</code> <span class="font-monospace">( string = 'md' )</span>
Set to <code>sm</code> for small or <code>lg</code> for large
</li>
</ul>
<h3 class="fw-bolder mb-2">Usage as a Class</h3>
<div class="doc-example mb-3">
$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']);</div>
<h3 class="fw-bolder mb-2">Usage as a Widget</h3>
<div class="doc-example mb-3">
use thoulah\fontawesome\IconWidget4 as IconWidget;
echo IconWidget::widget(['name' => 'at']);
echo IconWidget::widget(['name' => 'github', 'options' => ['style' => 'brands', 'fill' => '#003865']]);
echo IconWidget::widget([
'name' => 'font-awesome',
'options' => [
'class' => 'yourClass',
'style' => 'brands'
],
]);</div>
<h3 class="fw-bolder mb-2">Usage as a Component</h3>
<p>
This is the preferred method if you need to override any of the
default options throughout your application.
</p>
Add the component to your Yii config file:
<div class="doc-example mb-3">
'components' => [
'fontawesome' => [
'class' => thoulah\fontawesome\IconComponent::class,
// 'fontAwesomeFolder' => '@npm/fontawesome-pro/svgs',
// 'style' => 'regular',
]
]</div> Now you can globally insert an icon: <div class="doc-example mb-3">
echo Yii::$app->fontawesome->name('at');
echo Yii::$app->fontawesome->name('github', 'brands')->fill->('#003865');
echo Yii::$app->fontawesome->name('font-awesome', 'brands')->class('yourClass');</div>
<h3 class="fw-bolder mb-2">Usage from ActiveForm (automatic)</h3>
<div class="doc-example mb-3">
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',
],
]);
echo $form->field($model, 'field3', [
'icon' => [
'name' => 'github',
'style' => 'brands',
'append' => true,
],
]);
ActiveForm::end();</div>
<h3 class="fw-bolder mb-2">Usage from ActiveForm (manual)</h3>
For <code>$icon</code> you can use any earlier described usage method.
<div class="doc-example mb-3">
$form = ActiveForm::begin();
echo $form->field($model, 'field', [
'inputTemplate' => $icon->activeFieldAddon('font-awesome', ['style' => 'brands']),
]);
ActiveForm::end();</div>