Startseite>Ressourcen zum Erstellen von Websites>Schriftarten herunterladen
Herunterladen

Yii 2 Schriftart Fantastisches Asset -Bündel

Diese Erweiterung bietet ein Assets -Bundle mit einer Schriftart für YII Framework 2.0 -Anwendungen und Helfer, um Symbole zu verwenden.

Lizenzinformationen überprüfen Sie die Lizenzdatei.

Codestatus

Unterstützung

  • Guthub -Probleme
  • Öffentlicher Chat

FontAwesome -Version

Version von Schriftart Version der Erweiterung
4.* ~ 2.17
5.* ~ 3.0

Update auf 3.2

Seien Sie vorsichtig in Version 3.2 rmrevinyiifontawesomeAssetBundle Paket Verwenden Sie die CDN standardmäßig. Mehr im Changelog.

Update auf 3.0

Seien Sie vorsichtig in Version 3.0 wurden veraltete Methoden entfernt. Mehr im Changelog.

Update auf 2.17

Seien Sie vorsichtig in Version 2.17, die veralteten Methoden entfernt wurden. Mehr im Changelog.

Installation

Die bevorzugte Möglichkeit, diese Erweiterung zu installieren, ist über Komponist.

Entweder rennen 

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

oder hinzufügen 

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

zum require -Abschnitt Ihrer Datei composer.json .

Verwendung mit FA Pro -Version

CDN

Registrieren Sie Ihre Domain hier-https://fontawesome.com/how-to-use/on-web/setup/getting-started

Fügen Sie CdnProAssetBundle hinzu, die von Ihrem App Asset -Bundle abhängt: 

 class AppAsset extends AssetBundle
{
	// ...

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

Oder injizieren Sie CdnProAssetBundle aus Ihrer Ansicht: 

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

NPM

Installieren Sie das NPM -Schriftart von Schriftart: 

 npm install @fortawesome/fontawesome-pro

oder 

 yarn add @fortawesome/fontawesome-pro

Fügen Sie NpmProAssetBundle als Abhängigkeit von Ihrem App Asset Bundle hinzu: 

 class AppAsset extends AssetBundle
{
	// ...

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

Oder injizieren Sie NpmProAssetBundle aus Ihrer Sicht: 

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

Optional

Um die kostenlose Version des Schriftarts nicht zu installieren, können Sie sie zum replace von composer.json hinzufügen. 

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

Nutzung mit FA -kostenlose Version

CDN

Fügen Sie CdnFreeAssetBundle als abhängig von Ihrem App Asset -Bundle hinzu: 

 class AppAsset extends AssetBundle
{
	// ...

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

Oder injizieren Sie CdnFreeAssetBundle in Ihrer Ansicht: 

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

Komponist

Kostenlose Version des Pakets fortawesome/font-awesome bereits im Lieferanten installiert sind.

Fügen Sie NpmFreeAssetBundle als abhängig von Ihrem App Asset Bündel hinzu: 

 class AppAsset extends AssetBundle
{
	// ...

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

Oder injizieren Sie NpmFreeAssetBundle aus Ihrer Ansicht: 

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

Klassenreferenz

Namespace: rmrevinyiifontawesome ;

FAB , FAL , FAR , FAS oder FontAwesome

  • static FAR::icon($name, $options=[]) - erstellt ein componentIcon , mit dem das HTML -Symbol fontAwesome verwendet werden kann
    • $name - Name des Symbols in Schriftart Fantastiensatz.
    • $options - Zusätzliche Attribute für i.fa HTML -Tag.
  • static FAR::stack($name, $options=[]) - Erstellt einen componentStack , mit dem das HTML -Symbol fontaWesome verwendet werden kann
    • $options - Zusätzliche Attribute für span.fa-stack html tag.

Klassenkomponente componentIcon

  • (string)$Icon - Render -Symbol
  • $Icon->addCssClass($value) - Hinzufügen zu HTML Tag CSS -Klasse in $value
    • $value - Name der CSS -Klasse
  • $Icon->inverse() -Zu HTML Tag CSS-Klasse fa-inverse hinzufügen
  • $Icon->spin() -Zu HTML Tag CSS-Klasse fa-spin hinzufügen
  • $Icon->fixedWidth() -Zu HTML Tag CSS-Klasse fa-fw hinzufügen
  • $Icon->ul() -Zu HTML Tag CSS-Klasse fa-ul hinzufügen
  • $Icon->li() -Zu HTML Tag CSS-Klasse fa-li hinzufügen
  • $Icon->border() -Zu HTML Tag CSS-Klasse fa-border hinzufügen
  • $Icon->pullLeft() -Zu HTML Tag CSS-Klasse pull-left hinzufügen
  • $Icon->pullRight() -Hinzufügen zu HTML Tag CSS-Klasse pull-right
  • $Icon->size($value) - Zu HTML Tag CSS -Klasse mit Größe hinzufügen
    • $value - Größenwert (Varianten: FA::SIZE_LARGE , FA::SIZE_2X , FA::SIZE_3X , FA::SIZE_4X , FA::SIZE_5X )
  • $Icon->rotate($value) - zur html Tag CSS -Klasse mit Drehung hinzufügen
    • $value - Rotate Value (Varianten: FA::ROTATE_90 , FA::ROTATE_180 , FA::ROTATE_270 )
  • $Icon->flip($value) - Zu HTML -Tag -CSS -Klasse mit Drehen hinzufügen
    • $value - Flip Value (Varianten: FA::FLIP_HORIZONTAL , FA::FLIP_VERTICAL )

Klassenkomponente componentStack

  • (string)$Stack - Rendern Symbol Stack
  • $Stack->icon($icon, $options=[]) - Setzen Sie das Symbol für Stack
    • $icon - Name des Symbols oder componentIcon Symbolobjekts
    • $options - Zusätzliche Attribute für Icon HTML -Tag.
  • $Stack->icon($icon, $options=[]) - Hintergrundsymbol für Stack festlegen
    • $icon - Name des Symbols oder componentIcon Symbolobjekts
    • $options - Zusätzliche Attribute für Icon HTML -Tag.

Helferbeispiele 

 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 );
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle