Esta extensão fornece um pacote de ativos com a fonte impressionante para aplicativos e auxiliares da estrutura YII 2.0 para usar ícones.
Para informações de licença, verifique o arquivo de licença.
| Versão do Fonte-Ajuda | Versão da extensão |
|---|---|
| 4.* | ~ 2.17 |
| 5.* | ~ 3.0 |
3.2 Cuidado na versão 3.2 rmrevinyiifontawesomeAssetBundle Package Use CDN por padrão. Mais no Changelog.
3.0Tenha cuidado nos métodos depreciados da versão 3.0 foram removidos. Mais no Changelog.
2.17Tenha cuidado nos métodos depreciados da versão 2.17 foram removidos. Mais no Changelog.
A maneira preferida de instalar esta extensão é através do compositor.
Correr
composer require " rmrevin/yii2-fontawesome:~3.5 "ou adicione
"rmrevin/yii2-fontawesome": "~3.5",
para a seção require do seu arquivo composer.json .
Registre seu domínio aqui-https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
Adicione CdnProAssetBundle como depende do seu pacote de ativos de aplicativos:
class AppAsset extends AssetBundle
{
// ...
public $ depends = [
// ...
' rmrevinyiifontawesomeCdnProAssetBundle '
];
} Ou injete CdnProAssetBundle em sua opinião:
rmrevin yii fontawesome CdnProAssetBundle:: register ( $ this );Instale o pacote NPM da fonte:
npm install @fortawesome/fontawesome-pro
ou
yarn add @fortawesome/fontawesome-pro
E adicione NpmProAssetBundle como depende do seu pacote de ativos de aplicativos:
class AppAsset extends AssetBundle
{
// ...
public $ depends = [
// ...
' rmrevinyiifontawesomeNpmProAssetBundle '
];
} Ou injete NpmProAssetBundle em sua opinião:
rmrevin yii fontawesome NpmProAssetBundle:: register ( $ this ); Para não instalar a versão gratuita do pacote de fontes, você pode adicioná-lo à seção replace composer.json .
"replace": {
"fortawesome/font-awesome": "*"
},
Adicione CdnFreeAssetBundle , pois depende do seu pacote de ativos de aplicativos:
class AppAsset extends AssetBundle
{
// ...
public $ depends = [
// ...
' rmrevinyiifontawesomeCdnFreeAssetBundle '
];
} Ou injete CdnFreeAssetBundle em sua opinião:
rmrevin yii fontawesome CdnFreeAssetBundle:: register ( $ this ); Versão gratuita do pacote fortawesome/font-awesome já instalado no fornecedor.
Adicione NpmFreeAssetBundle como depende do seu pacote de ativos de aplicativos:
class AppAsset extends AssetBundle
{
// ...
public $ depends = [
// ...
' rmrevinyiifontawesomeNpmFreeAssetBundle '
];
} Ou injete NpmFreeAssetBundle em sua opinião:
rmrevin yii fontawesome NpmFreeAssetBundle:: register ( $ this ); Namespace: rmrevinyiifontawesome ;
FAB , FAL , FAR , FAS ou FontAwesomestatic FAR::icon($name, $options=[]) - cria um componentIcon que pode ser usado para fontes$name - Nome do ícone no conjunto Awesome da fonte.$options - Atributos adicionais para a tag i.fa HTML.static FAR::stack($name, $options=[]) - cria uma componentStack que pode ser usada para fontes$options - Atributos adicionais para span.fa-stack HTML Tag.componentIcon(string)$Icon - Ícone de renderização$Icon->addCssClass($value) - Adicione à classe HTML Tag CSS em $value$value - nome da classe CSS$Icon->inverse() -Adicione à tag html CSS Classe fa-inverse$Icon->spin() -Adicione à tag html CSS CLASS fa-spin$Icon->fixedWidth() -Adicione à tag html CSS CLASS fa-fw$Icon->ul() -Adicione à tag html CSS Classe fa-ul$Icon->li() -Adicione à tag html CSS CLASS fa-li$Icon->border() -Adicione à tag html CSS Classe fa-border$Icon->pullLeft() -Adicione à tag html CSS CLASS pull-left$Icon->pullRight() -Adicione à tag html CSS CLASS pull-right$Icon->size($value) - Adicione à classe HTML tag CSS com tamanho$value - Valor do tamanho (variantes: FA::SIZE_LARGE , FA::SIZE_2X , FA::SIZE_3X , FA::SIZE_4X , FA::SIZE_5X )$Icon->rotate($value) - Adicione à classe HTML tag CSS com girar$value - girar valor (variantes: FA::ROTATE_90 , FA::ROTATE_180 , FA::ROTATE_270 )$Icon->flip($value) - Adicione à classe HTML Tag CSS com girar$value - Valor flip (variantes: FA::FLIP_HORIZONTAL , FA::FLIP_VERTICAL )componentStack(string)$Stack - Render Icon Stack$Stack->icon($icon, $options=[]) - Defina o ícone para pilha$icon - nome do ícone ou componentIcon Object$options - Atributos adicionais para o ícone HTML tag.$Stack->icon($icon, $options=[]) - Defina o ícone de fundo para a pilha$icon - nome do ícone ou componentIcon Object$options - Atributos adicionais para o ícone HTML tag. use rmrevin yii fontawesome FAS ;
// or (only in pro version https://fontawesome.com/pro)
// use rmrevinyiifontawesomeFAR;
// use rmrevinyiifontawesomeFAL;
// use rmrevinyiifontawesomeFAB;
// normal use
echo FAS :: icon ( ' home ' ); // <i class="fas fa-home"></i>
// shortcut
echo FAS :: i ( ' home ' ); // <i class="fas fa-home"></i>
// icon with additional attributes
echo FAS :: icon (
' arrow-left ' ,
[ ' class ' => ' big ' , ' data-role ' => ' arrow ' ]
); // <i class="big fas fa-arrow-left" data-role="arrow"></i>
// icon in button
echo Html:: submitButton (
Yii:: t ( ' app ' , ' {icon} Save ' , [ ' icon ' => FAS :: icon ( ' check ' )])
); // <button type="submit"><i class="fas fa-check"></i> Save</button>
// icon with additional methods
echo FAS :: icon ( ' cog ' )-> inverse (); // <i class="fas fa-cog fa-inverse"></i>
echo FAS :: icon ( ' cog ' )-> spin (); // <i class="fas fa-cog fa-spin"></i>
echo FAS :: icon ( ' cog ' )-> fixedWidth (); // <i class="fas fa-cog fa-fw"></i>
echo FAS :: icon ( ' cog ' )-> li (); // <i class="fas fa-cog fa-li"></i>
echo FAS :: icon ( ' cog ' )-> border (); // <i class="fas fa-cog fa-border"></i>
echo FAS :: icon ( ' cog ' )-> pullLeft (); // <i class="fas fa-cog pull-left"></i>
echo FAS :: icon ( ' cog ' )-> pullRight (); // <i class="fas fa-cog pull-right"></i>
// icon size
echo FAS :: icon ( ' cog ' )-> size ( FAS :: SIZE_3X );
// values: FAS::SIZE_LARGE, FAS::SIZE_2X, FAS::SIZE_3X, FAS::SIZE_4X, FAS::SIZE_5X
// <i class="fas fa-cog fa-size-3x"></i>
// icon rotate
echo FAS :: icon ( ' cog ' )-> rotate ( FAS :: ROTATE_90 );
// values: FAS::ROTATE_90, FAS::ROTATE_180, FAS::ROTATE_180
// <i class="fas fa-cog fa-rotate-90"></i>
// icon flip
echo FAS :: icon ( ' cog ' )-> flip ( FAS :: FLIP_VERTICAL );
// values: FAS::FLIP_HORIZONTAL, FAS::FLIP_VERTICAL
// <i class="fas fa-cog fa-flip-vertical"></i>
// icon with multiple methods
echo FAS :: icon ( ' cog ' )
-> spin ()
-> fixedWidth ()
-> pullLeft ()
-> size ( FAS :: SIZE_LARGE );
// <i class="fas fa-cog fa-spin fa-fw pull-left fa-size-lg"></i>
// icons stack
echo FAS :: stack ()
-> icon ( ' twitter ' )
-> on ( ' square-o ' );
// <span class="fa-stack">
// <i class="fas fa-square-o fa-stack-2x"></i>
// <i class="fas fa-twitter fa-stack-1x"></i>
// </span>
// icons stack with additional attributes
echo FAS :: stack ([ ' data-role ' => ' stacked-icon ' ])
-> on ( FAS :: Icon ( ' square ' )-> inverse ())
-> icon ( FAS :: Icon ( ' cog ' )-> spin ());
// <span class="fa-stack" data-role="stacked-icon">
// <i class="fas fa-square-o fa-inverse fa-stack-2x"></i>
// <i class="fas fa-cog fa-spin fa-stack-1x"></i>
// </span>
// Stacking text and icons
echo FAS :: stack ()
-> on ( FAS :: Icon ( ' square ' ))
-> text ( ' 1 ' );
// <span class="fa-stack">
// <i class="fas fa-square fa-stack-2x"></i>
// <span class="fa-stack-1x">1</span>
// </span>
// Stacking text and icons with options
echo FAS :: stack ()
-> on ( FAS :: Icon ( ' square ' ))
-> text ( ' 1 ' , [ ' tag ' => ' strong ' , ' class ' => ' stacked-text ' ]);
// <span class="fa-stack">
// <i class="fas fa-square fa-stack-2x"></i>
// <strong class="stacked-text fa-stack-1x">1</strong>
// </span>
// Now you can add some css for vertical text positioning:
. stacked-text { margin-top: .3 em; }
// unordered list icons
echo FAS :: ul ([ ' data-role ' => ' unordered-list ' ])
-> item ( ' Bullet item ' , [ ' icon ' => ' circle ' ])
-> item ( ' Checked item ' , [ ' icon ' => ' check ' ]);
// <ul class="fa-ul" data-role="unordered-list">
// <li><i class="fas fa-circle fa-li"></i>Bullet item</li>
// <li><i class="fas fa-check fa-li"></i>Checked Item</li>
// </span>
// autocomplete icons name in IDE
echo FAS :: icon ( FAS :: _COG );
echo FAS :: icon ( FAS :: _DESKTOP );
echo FAS :: stack ()
-> on ( FAS :: _CIRCLE_O )
-> icon ( FAS :: _TWITTER );