หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

Yii 2 Font Asset Bundle

ส่วนขยายนี้ให้ชุดสินทรัพย์พร้อมฟอนต์ที่ยอดเยี่ยมสำหรับแอปพลิเคชัน YII Framework 2.0 และผู้ช่วยใช้ไอคอน

สำหรับข้อมูลใบอนุญาตตรวจสอบไฟล์ใบอนุญาต

สถานะรหัส

สนับสนุน

  • ปัญหา Guthub
  • แชทสาธารณะ

เวอร์ชัน Fontawesome

เวอร์ชันของ Font-Joresome ส่วนขยาย
4.* ~ 2.17
5.* ~ 3.0

อัปเดตเป็น 3.2

ระวังในเวอร์ชัน 3.2 rmrevinyiifontawesomeAssetBundle แพ็คเกจใช้ CDN โดยค่าเริ่มต้น เพิ่มเติมในการเปลี่ยนแปลง

อัปเดตเป็น 3.0

ระวังวิธีการเลิกจ้างรุ่น 3.0 ที่ไม่ได้รับการคัดเลือก เพิ่มเติมในการเปลี่ยนแปลง

อัปเดตเป็น 2.17

ระวังวิธีการเลิกจ้างรุ่น 2.17 ถูกลบออก เพิ่มเติมในการเปลี่ยนแปลง

การติดตั้ง

วิธีที่ต้องการในการติดตั้งส่วนขยายนี้คือผ่านนักแต่งเพลง

วิ่งอย่างใดอย่างหนึ่ง 

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

หรือเพิ่ม 

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

ไปยังส่วน require ของไฟล์ composer.json ของคุณ 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 );

ไม่จำเป็น

เพื่อไม่ให้ติดตั้งแพ็คเกจ Font-Woresome เวอร์ชันฟรีคุณสามารถเพิ่มลงในส่วน replace ของ composer.json 

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

การใช้งานกับ FA ฟรีเวอร์ชัน

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 ที่สามารถใช้ในการใช้ไอคอน html fontawesome
    • $name - ชื่อไอคอนในชุด FONT AWESECHES SET
    • $options - แอตทริบิวต์เพิ่มเติมสำหรับแท็ก i.fa HTML
  • static FAR::stack($name, $options=[]) - สร้าง componentStack ที่สามารถใช้ในการใช้ไอคอน html fontawesome
    • $options - แอตทริบิวต์เพิ่มเติมสำหรับ span.fa-stack แท็ก HTML

componentIcon

  • (string)$Icon - ไอคอนเรนเดอร์
  • $Icon->addCssClass($value) - เพิ่มไปยังคลาส HTML TAG CSS ใน $value
    • $value - ชื่อของคลาส CSS
  • $Icon->inverse() -เพิ่มลงใน html tag css คลาส fa-inverse
  • $Icon->spin() -เพิ่มลงใน html tag css คลาส fa-spin
  • $Icon->fixedWidth() -เพิ่มลงใน HTML TAG CSS คลาส fa-fw
  • $Icon->ul() -เพิ่มลงใน html tag css คลาส fa-ul
  • $Icon->li() -เพิ่มลงใน HTML TAG CSS คลาส fa-li
  • $Icon->border() -เพิ่มลงใน html tag css คลาส fa-border
  • $Icon->pullLeft() -เพิ่มลงใน html tag css class pull-left
  • $Icon->pullRight() -เพิ่มลงใน html tag css คลาส 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=[]) - ตั้งไอคอนสำหรับสแต็ก
    • $icon - ชื่อของไอคอนหรือ componentIcon Object
    • $options - แอตทริบิวต์เพิ่มเติมสำหรับไอคอน HTML TAG
  • $Stack->icon($icon, $options=[]) - ตั้งค่าไอคอนพื้นหลังสำหรับสแต็ก
    • $icon - ชื่อของไอคอนหรือ componentIcon Object
    • $options - แอตทริบิวต์เพิ่มเติมสำหรับไอคอน 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 );
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด