Page d'accueil>Ressources de création de sites Web>Téléchargement de polices
Télécharger

Yii 2 Font Awesome Asset Bundle

Cette extension fournit un bundle d'actifs avec une police impressionnante pour les applications YII Framework 2.0 et une aide à utiliser des icônes.

Pour les informations de licence, vérifiez le fichier de licence.

État du code

Soutien

  • Problèmes de guthub
  • Chat public

Version Fontawesome

Version de Font-Awesome Version de l'extension
4. * ~ 2.17
5. * ~ 3.0

Mise à jour vers 3.2

Soyez prudent dans la version 3.2 rmrevinyiifontawesomeAssetBundle Package Utilisez CDN par défaut. Plus dans le Changelog.

Mise à jour vers 3.0

Soyez prudent dans la version 3.0, les méthodes obsolètes ont été supprimées. Plus dans le Changelog.

Mise à jour vers 2.17

Soyez prudent dans la version 2.17 Les méthodes obsolètes ont été supprimées. Plus dans le Changelog.

Installation

La façon préférée d'installer cette extension est via le compositeur.

Soit courir 

composer require " rmrevin/yii2-fontawesome:~3.5 "

ou ajouter 

 "rmrevin/yii2-fontawesome": "~3.5",

à la section require de votre fichier composer.json .

Utilisation avec la version FA Pro

Monnaie

Enregistrez votre domaine ici - https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

Ajouter CdnProAssetBundle comme cela dépend de votre bundle d'actifs APP: 

 class AppAsset extends AssetBundle
{
	// ...

	public $ depends = [
		// ...
		' rmrevinyiifontawesomeCdnProAssetBundle '
	];
}

Ou injecter CdnProAssetBundle à votre point de vue: 

 rmrevin  yii  fontawesome CdnProAssetBundle:: register ( $ this );

NPM

Installez le package NPM de police: 

 npm install @fortawesome/fontawesome-pro

ou 

 yarn add @fortawesome/fontawesome-pro

Et ajouter NpmProAssetBundle comme cela dépend de votre bundle d'actifs APP: 

 class AppAsset extends AssetBundle
{
	// ...

	public $ depends = [
		// ...
		' rmrevinyiifontawesomeNpmProAssetBundle '
	];
}

Ou injecter NpmProAssetBundle à votre avis: 

 rmrevin  yii  fontawesome NpmProAssetBundle:: register ( $ this );

Facultatif

Pour ne pas installer la version gratuite du package Font-Awames, vous pouvez l'ajouter à la section replace de composer.json . 

  "replace": {
    "fortawesome/font-awesome": "*"
  },

Utilisation avec la version gratuite FA

Monnaie

Ajouter CdnFreeAssetBundle comme cela dépend de votre bundle d'actifs APP: 

 class AppAsset extends AssetBundle
{
	// ...

	public $ depends = [
		// ...
		' rmrevinyiifontawesomeCdnFreeAssetBundle '
	];
}

Ou injecter CdnFreeAssetBundle dans votre point de vue: 

 rmrevin  yii  fontawesome CdnFreeAssetBundle:: register ( $ this );

Compositeur

Version gratuite de Package fortawesome/font-awesome déjà installé dans Vendor.

Ajoutez NpmFreeAssetBundle comme cela dépend de votre bundle d'actifs APP: 

 class AppAsset extends AssetBundle
{
	// ...

	public $ depends = [
		// ...
		' rmrevinyiifontawesomeNpmFreeAssetBundle '
	];
}

Ou injecter NpmFreeAssetBundle dans votre point de vue: 

 rmrevin  yii  fontawesome NpmFreeAssetBundle:: register ( $ this );

Référence de classe

Espace de noms: rmrevinyiifontawesome ;

Class FAB , FAL , FAR , FAS ou FontAwesome

  • static FAR::icon($name, $options=[]) - Crée une componentIcon qui peut être utilisée pour Fontawesome HTML ICON
    • $name - Nom de l'icône dans la police Awesome Set.
    • $options - Attributs supplémentaires pour la balise HTML i.fa
  • static FAR::stack($name, $options=[]) - crée un componentStack qui peut être utilisé pour Fontawesome HTML ICON
    • $options - Attributs supplémentaires pour la balise HTML span.fa-stack .

componentIcon

  • (string)$Icon - Icône de rendu
  • $Icon->addCssClass($value) - Ajouter à la classe CSS de balise HTML en $value
    • $value - Nom de la classe CSS
  • $Icon->inverse() - Ajouter à HTML TAG CSS Class fa-inverse
  • $Icon->spin() - Ajouter à HTML TAG CSS CLASS fa-spin
  • $Icon->fixedWidth() - Ajouter à la classe HTML CSS Class fa-fw
  • $Icon->ul() - Ajouter à HTML TAG CSS CLASS fa-ul
  • $Icon->li() - Ajouter à la classe HTML CSS fa-li
  • $Icon->border() - Ajouter à HTML TAG CSS Class fa-border
  • $Icon->pullLeft() - Ajouter à HTML TAG CSS Class pull-left
  • $Icon->pullRight() - Ajouter à HTML TAG CSS Class pull-right
  • $Icon->size($value) - Ajouter à la classe CSS TAG HTML avec taille
    • $value - Valeur de taille (Variants: FA::SIZE_LARGE , FA::SIZE_2X , FA::SIZE_3X , FA::SIZE_4X , FA::SIZE_5X )
  • $Icon->rotate($value) - Ajouter à la classe CSS de la balise HTML avec Rotate
    • $value - Rotate Value (Variants: FA::ROTATE_90 , FA::ROTATE_180 , FA::ROTATE_270 )
  • $Icon->flip($value) - Ajouter à la classe CSS TAG HTML avec Rotate
    • $value - Flip Value (Variants: FA::FLIP_HORIZONTAL , FA::FLIP_VERTICAL )

componentStack

  • (string)$Stack - Rendre la pile d'icônes
  • $Stack->icon($icon, $options=[]) - Définissez l'icône pour pile
    • $icon - Nom de l'icône ou componentIcon
    • $options - Attributs supplémentaires pour la balise HTML icône.
  • $Stack->icon($icon, $options=[]) - Définissez l'icône d'arrière-plan pour pile
    • $icon - Nom de l'icône ou componentIcon
    • $options - Attributs supplémentaires pour la balise HTML icône.

Exemples d'aide 

 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 );
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout