ใน code สมัยนี้นิยมใส่ไอคอนที่เป็นฟอนต์ที่เป็นรูปที่นิยมใช้ ๆ กัน คือ Font Awesome ตัวอย่างการใส่ Font Awesome ใน TypeScript ทำได้ง่าย ๆ
- เพิ่ม Font Awesome โดย command
npm install @fortawesome/fontawesome-free - เปิดไฟล์ SourceCode/resources/js/app.ts
- เพิ่ม code
12
//Font Awesomeimport'@fortawesome/fontawesome-free/css/all.css'; - ใช้ command
npm run dev - ทดสอบโดยใส่ในส่วนที่เป็น html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <dl> <dt>Brands</dt> <dd><i class="fa-brands fa-discord"></i> fa-discord</dd> <dd><i class="fa-brands fa-facebook"></i> fa-facebook</dd> <dd><i class="fa-brands fa-figma"></i> fa-figma</dd> <dd><i class="fa-brands fa-github"></i> fa-github</dd> <dd><i class="fa-brands fa-google"></i> fa-google</dd> <dd><i class="fa-brands fa-instagram"></i> fa-instagram</dd> <dd><i class="fa-brands fa-linkedin"></i> fa-linkedin</dd> <dd><i class="fa-brands fa-slack"></i> fa-slack</dd> <dd><i class="fa-brands fa-tiktok"></i> fa-tiktok</dd> <dd><i class="fa-brands fa-twitter"></i> fa-twitter</dd> <dd><i class="fa-brands fa-wordpress"></i> fa-wordpress</dd> <dd><i class="fa-brands fa-youtube"></i> fa-youtube</dd> <dt>Regular</dt> <dd><i class="fa-regular fa-bookmark"></i> fa-bookmark</dd> <dd><i class="fa-regular fa-calendar-check"></i> fa-calendar-check</dd> <dd><i class="fa-regular fa-clock"></i> fa-clock</dd> <dd><i class="fa-regular fa-comments"></i> fa-comments</dd> <dd><i class="fa-regular fa-copy"></i> fa-copy</dd> <dd><i class="fa-regular fa-eye-slash"></i> fa-eye-slash</dd> <dd><i class="fa-regular fa-eye"></i> fa-eye</dd> <dd><i class="fa-regular fa-file"></i> fa-file</dd> <dd><i class="fa-regular fa-id-card"></i> fa-id-card</dd> <dd><i class="fa-regular fa-message"></i> fa-message</dd> <dd><i class="fa-regular fa-paste"></i> fa-paste</dd> <dd><i class="fa-regular fa-rectangle-list"></i> fa-rectangle-list</dd> <dd><i class="fa-regular fa-star"></i> fa-star</dd> <dd><i class="fa-regular fa-user"></i> fa-user</dd> <dt>Solid</dt> <dd><i class="fa-solid fa-address-book"></i> fa-address-book</dd> <dd><i class="fa-solid fa-alarm-clock"></i> fa-alarm-clock</dd> <dd><i class="fa-solid fa-arrow-down"></i> fa-arrow-down</dd> <dd><i class="fa-solid fa-arrow-left"></i> fa-arrow-left</dd> <dd><i class="fa-solid fa-arrow-right"></i> fa-arrow-right</dd> <dd><i class="fa-solid fa-arrow-up"></i> fa-arrow-up</dd> <dd><i class="fa-solid fa-bars"></i> fa-bars</dd> <dd><i class="fa-solid fa-bell"></i> fa-bell</dd> <dd><i class="fa-solid fa-bolt"></i> fa-bolt</dd> <dd><i class="fa-solid fa-calendar-day"></i> fa-calendar-day</dd> <dd><i class="fa-solid fa-calendar-days"></i> fa-calendar-days</dd> <dd><i class="fa-solid fa-calendar-week"></i> fa-calendar-week</dd> <dd><i class="fa-solid fa-cart-shopping"></i> fa-cart-shopping</dd> <dd><i class="fa-solid fa-chart-line"></i> fa-chart-line</dd> <dd><i class="fa-solid fa-check"></i> fa-check</dd> <dd><i class="fa-solid fa-circle-info"></i> fa-circle-info</dd> <dd><i class="fa-solid fa-circle-user"></i> fa-circle-user</dd> <dd><i class="fa-solid fa-circle-xmark"></i> fa-circle-xmark</dd> <dd><i class="fa-solid fa-clipboard"></i> fa-clipboard</dd> <dd><i class="fa-solid fa-cloud"></i> fa-cloud</dd> <dd><i class="fa-solid fa-code"></i> fa-code</dd> <dd><i class="fa-solid fa-comment"></i> fa-comment</dd> <dd><i class="fa-solid fa-database"></i> fa-database</dd> <dd><i class="fa-solid fa-download"></i> fa-download</dd> <dd><i class="fa-solid fa-envelope"></i> fa-envelope</dd> <dd><i class="fa-solid fa-file"></i> fa-file</dd> <dd><i class="fa-solid fa-filter"></i> fa-filter</dd> <dd><i class="fa-solid fa-folder"></i> fa-folder</dd> <dd><i class="fa-solid fa-gear"></i> fa-gear</dd> <dd><i class="fa-solid fa-hashtag"></i> fa-hashtag</dd> <dd><i class="fa-solid fa-heart"></i> fa-heart</dd> <dd><i class="fa-solid fa-house"></i> fa-house</dd> <dd><i class="fa-solid fa-image"></i> fa-image</dd> <dd><i class="fa-solid fa-info"></i> fa-info</dd> <dd><i class="fa-solid fa-key"></i> fa-key</dd> <dd><i class="fa-solid fa-language"></i> fa-language</dd> <dd><i class="fa-solid fa-link"></i> fa-link</dd> <dd><i class="fa-solid fa-location-dot"></i> fa-location-dot</dd> <dd><i class="fa-solid fa-lock-open"></i> fa-lock-open</dd> <dd><i class="fa-solid fa-lock"></i> fa-lock</dd> <dd><i class="fa-solid fa-magnifying-glass"></i> fa-magnifying-glass</dd> <dd><i class="fa-solid fa-minus"></i> fa-minus</dd> <dd><i class="fa-solid fa-music"></i> fa-music</dd> <dd><i class="fa-solid fa-paperclip"></i> fa-paperclip</dd> <dd><i class="fa-solid fa-pen"></i> fa-pen</dd> <dd><i class="fa-solid fa-phone"></i> fa-phone</dd> <dd><i class="fa-solid fa-plus"></i> fa-plus</dd> <dd><i class="fa-solid fa-rotate"></i> fa-rotate</dd> <dd><i class="fa-solid fa-shield-halved"></i> fa-shield-halved</dd> <dd><i class="fa-solid fa-shield"></i> fa-shield</dd> <dd><i class="fa-solid fa-signature"></i> fa-signature</dd> <dd><i class="fa-solid fa-sliders"></i> fa-sliders</dd> <dd><i class="fa-solid fa-star"></i> fa-star</dd> <dd><i class="fa-solid fa-trash"></i> fa-trash</dd> <dd><i class="fa-solid fa-user-group"></i> fa-user-group</dd> <dd><i class="fa-solid fa-users"></i> fa-users</dd> <dd><i class="fa-solid fa-wand-magic-sparkles"></i> fa-wand-magic-sparkles</dd> <dd><i class="fa-solid fa-xmark"></i> fa-xmark</dd></dl> |
อ่านเพิ่มเติม