الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

yii 2 font حزمة الأصول الرائعة

يوفر هذا الامتداد حزمة الأصول مع خط رائع لتطبيقات YII Framework 2.0 و Helper لاستخدام الرموز.

للحصول على معلومات الترخيص ، تحقق من ملف الترخيص.

حالة الكود

يدعم

  • قضايا Guthub
  • الدردشة العامة

نسخة صماقة

نسخة من الخط نسخة من الامتداد
4.* ~ 2.17
5.* ~ 3.0

تحديث إلى 3.2

كن حذرًا في الإصدار 3.2 rmrevinyiifontawesomeAssetBundle استخدم CDN بشكل افتراضي. المزيد في Changelog.

تحديث إلى 3.0

كن حذرا في الإصدار 3.0 تم إزالة الأساليب المهملة. المزيد في Changelog.

تحديث إلى 2.17

كن حذرا في الإصدار 2.17 تم إزالة الطرق المنهكة. المزيد في Changelog.

تثبيت

الطريقة المفضلة لتثبيت هذا الامتداد هي من خلال الملحن.

إما تشغيل 

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

أو إضافة 

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

إلى قسم require من ملف composer.json الخاص بك.

الاستخدام مع إصدار FA Pro

CDN

سجل المجال الخاص بك هنا-https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

أضف CdnProAssetBundle كما يعتمد على حزمة أصول التطبيق الخاصة بك: 

 class AppAsset extends AssetBundle
{
	// ...

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

أو حقن CdnProAssetBundle في عرضك: 

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

NPM

تثبيت حزمة NPM من الخط: 

 npm install @fortawesome/fontawesome-pro

أو 

 yarn add @fortawesome/fontawesome-pro

وأضف NpmProAssetBundle كما يعتمد على حزمة أصول التطبيق الخاصة بك: 

 class AppAsset extends AssetBundle
{
	// ...

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

أو حقن NpmProAssetBundle في وجهة نظرك: 

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

خياري

من أجل عدم تثبيت الإصدار المجاني من الحزمة الرائعة ، يمكنك إضافته إلى قسم replace composer.json . 

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

الاستخدام مع إصدار FA Free

CDN

أضف CdnFreeAssetBundle كما يعتمد على حزمة أصول التطبيق الخاصة بك: 

 class AppAsset extends AssetBundle
{
	// ...

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

أو حقن CdnFreeAssetBundle في عرضك: 

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

الملحن

نسخة مجانية من الحزمة fortawesome/font-awesome مثبتة بالفعل في البائع.

أضف NpmFreeAssetBundle كما يعتمد على حزمة أصول التطبيق الخاصة بك: 

 class AppAsset extends AssetBundle
{
	// ...

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

أو حقن NpmFreeAssetBundle في عرضك: 

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

مرجع الفصل

مساحة الاسم: rmrevinyiifontawesome ؛

فاب FAB ، FAL ، FAR ، FAS أو FontAwesome

  • static FAR::icon($name, $options=[]) - ينشئ componentIcon يمكن استخدام
    • $name - اسم أيقونة في Font Awesome Set.
    • $options - سمات إضافية لعلامة i.fa HTML.
  • static FAR::stack($name, $options=[]) - يقوم بإنشاء componentStack يمكن استخدامه لإيقاع HTML Icon
    • $options - سمات إضافية لعلامة HTML span.fa-stack .

componentIcon

  • (string)$Icon - عرض أيقونة
  • $Icon->addCssClass($value) - إضافة إلى فئة HTML Tag CSS في $value
    • $value - اسم فئة CSS
  • $Icon->inverse() fa-inverse إلى HTML Tag CSS Class
  • $Icon->spin() -أضف إلى HTML Tag CSS Class fa-spin
  • $Icon->fixedWidth() -أضف إلى HTML TAG CSS Class fa-fw
  • $Icon->ul() -أضف إلى HTML Tag CSS Class fa-ul
  • $Icon->li() -أضف إلى HTML TAG CSS Class fa-li
  • $Icon->border() -أضف إلى HTML Tag CSS Class fa-border
  • $Icon->pullLeft() pull-left إلى HTML Tag CSS Class
  • $Icon->pullRight() -أضف إلى HTML Tag CSS Class pull-right
  • $Icon->size($value) - أضف إلى فئة HTML Tag CSS مع الحجم
    • $value - قيمة الحجم (المتغيرات: FA::SIZE_LARGE ، FA::SIZE_2X ، FA::SIZE_3X ، FA::SIZE_4X ، FA::SIZE_5X )
  • $Icon->rotate($value) - أضف إلى فئة HTML Tag CSS مع الدوران
    • $value - قيمة الدوران (المتغيرات: FA::ROTATE_90 ، FA::ROTATE_180 ، FA::ROTATE_270 )
  • $Icon->flip($value) - أضف إلى فئة HTML Tag CSS مع الدوران
    • $value - قيمة الوجه (المتغيرات: FA::FLIP_HORIZONTAL ، FA::FLIP_VERTICAL )

componentStack

  • (string)$Stack - عرض مكدس أيقونة
  • $Stack->icon($icon, $options=[]) - Set icon for stack
    • $icon - اسم أيقونة أو componentIcon
    • $options - سمات إضافية لعلامة أيقونة HTML.
  • $Stack->icon($icon, $options=[]) - قم بتعيين أيقونة الخلفية للمكدس
    • $icon - اسم أيقونة أو componentIcon
    • $options - سمات إضافية لعلامة أيقونة HTML.

أمثلة مساعد 

 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 );
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل