แบบอักษรที่ยอดเยี่ยม: คู่มือห้องสมุดที่สมบูรณ์

แบบอักษรที่ยอดเยี่ยม: คู่มือห้องสมุดที่สมบูรณ์


ไอคอนฟรีแบบอักษรที่ยอดเยี่ยม: มันคืออะไรและสิ่งที่ใช้สำหรับ วิธีเชื่อมต่อไอคอนไปยังเว็บไซต์ ข้อดีและข้อเสียของห้องสมุด

ตัวอักษรที่ยอดเยี่ยมคืออะไรและมันใช้สำหรับอะไรในเว็บไซต์ สิทธิประโยชน์ห้องสมุด

ชุดไอคอนแบบอักษรที่ยอดเยี่ยม: คู่มือที่ดีที่สุด

Font Awesome เป็นชุดของแบบอักษรและไอคอนที่ใช้ CSS และน้อยกว่า เครื่องมือนี้ช่วยให้คุณสามารถเชื่อมต่อไอคอนทุกชนิดกับเว็บไซต์ได้อย่างรวดเร็วปรับปรุงการออกแบบและการใช้งานอย่างมีนัยสำคัญ มันเพียงพอที่จะแทรกรหัสสองสามบรรทัด

Font Awesome ให้ไอคอนเวกเตอร์ที่ปรับขนาดได้ซึ่งคุณสามารถปรับแต่งขนาดสีเงาและทุกอย่างที่สามารถทำได้ด้วย CSS

Font Awesome Library มีคอลเล็กชั่นข้อเสนอแนะที่ดีที่สุดสำหรับคุณ คุณปรับปรุงโครงการของคุณด้วยไอคอนที่ไม่เหมือนใคร ในความเป็นจริงนี่เป็นชุดไอคอนขนาดใหญ่ทุกชนิดที่คุณสามารถใช้เพื่อจุดประสงค์ของคุณเอง

ใน fontawesome ไอคอนทั้งหมดฟรีและสมบูรณ์ฟรี ห้องสมุดได้รับอนุญาตภายใต้ใบอนุญาตสาธารณะทั่วไป GNU ซึ่งหมายความว่าสามารถใช้งานได้อย่างอิสระในโครงการเชิงพาณิชย์และในหลักการทุกที่

ชุดนี้ถูกสร้างขึ้นโดย Dave Gandhi มันมีไอคอนโซเชียลมีเดียฟรีไอคอนเพื่อปรับปรุงส่วนต่อประสานผู้ใช้และอื่น ๆ

โดยทั่วไปแล้วสคริปต์ตัวอักษรแบบอักษรที่ยอดเยี่ยมจะใช้ร่วมกับ Bootstrap และ Bootstrapcdn แบบอักษรที่ยอดเยี่ยมเป็นที่สองเฉพาะกับ Google แบบอักษรในความนิยม

มันทำงานอย่างไร

คุณสมบัติหลักคือไอคอนตัวอักษรที่ยอดเยี่ยมทั้งหมดไม่ใช่ภาพคงที่ พวกเขาอยู่ในรูปแบบตัวอักษร กล่าวอีกนัยหนึ่งเหล่านี้เป็นแบบอักษรไอคอน ตัวอย่างเช่นไอคอนการค้นหาหรือโลโก้เครือข่ายโซเชียลนั้นเหมือนกับตัวละครง่าย ๆ A, B, C

ไอคอนแบบอักษรที่ยอดเยี่ยมถูกสร้างขึ้นโดยใช้เวกเตอร์ที่ปรับขนาดได้ ดังนั้นจึงสามารถเพิ่มขนาดได้เกือบทุกขนาด

ไอคอนที่มีอยู่ทั้งหมดรวมอยู่ในไฟล์ตัวอักษรเดียว ทั้งหมดที่คุณต้องการคือการดาวน์โหลดไฟล์นี้จากเว็บไซต์อย่างเป็นทางการและเชื่อมต่อในสไตล์

ทำไมนักออกแบบเลือกแบบอักษรที่ยอดเยี่ยม

แบบอักษรที่ยอดเยี่ยมมีข้อดีหลายประการ:

  • การเชื่อมต่อที่รวดเร็ว คุณเพียงแค่ต้องดาวน์โหลดไฟล์พิเศษจากเว็บไซต์อย่างเป็นทางการและเชื่อมต่อโดยระบุพา ธ ไปยังรหัส CSS
  • ความยืดหยุ่นและความยืดหยุ่น ไอคอนสามารถขยายขนาดใดก็ได้ สัญลักษณ์จะชัดเจนเนื่องจากอุปกรณ์อนุญาต ในยุคของการออกแบบที่ตอบสนองนี่เป็นสิ่งสำคัญ ด้วยวิธีเดียวกันด้วยเหตุผลเดียวกันไอคอนตัวอักษรที่ยอดเยี่ยมเหมาะสำหรับจอแสดงผลเรตินา
  • stylization ไอคอนสามารถเปลี่ยนสีขนาดเงาหรือพารามิเตอร์ภายนอกอื่น ๆ ได้อย่างง่ายดาย นักออกแบบได้รับประโยชน์ทั้งหมดของการจัดแต่งทรงผมข้อความปกติ คุณสามารถหมุนไอคอนได้ ตัวอย่างเช่นแสดงคว่ำหรือหมุน 90 องศา
  • โหลดที่รวดเร็วของเว็บไซต์ ไอคอนทั้งหมดรวมอยู่ในไฟล์ตัวอักษรเดียว ดังนั้นจึงใช้คำขอ HTTP หนึ่งครั้งเพื่อโหลดแบบอักษรที่ยอดเยี่ยม นี่เป็นสิ่งที่ยอดเยี่ยมสำหรับประสิทธิภาพของเว็บไซต์
  • ความรักของเบราว์เซอร์ Font Awesome เป็นเครื่องมือข้ามเบราว์เซอร์ คุณไม่ต้องกังวลเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์ของแบบอักษรและไอคอน พวกเขาได้รับการสนับสนุนอย่างดีจากพวกเขาทั้งหมด แม้แต่ IE8 เก่า
  • เข้ากันได้กับเฟรมเวิร์กที่แตกต่างกัน ห้องสมุดถูกสร้างขึ้นเป็นหลักสำหรับ Bootstrap อย่างไรก็ตามมันจะทำงานได้ดีกับเฟรมเวิร์กอื่น ๆ เช่นกัน
  • หลายรูปแบบ เครื่องมือนี้มีอยู่ในรูปแบบ. EOT, .TF, .WOFF และ SVG ดังนั้นตัวอักษรที่ยอดเยี่ยมได้รับการจัดการในลักษณะเดียวกับแบบอักษรเว็บอื่น ๆ
  • ไม่จำเป็นต้องใช้จาวาสคริปต์ แบบอักษรที่ยอดเยี่ยมไม่ต้องการจาวาสคริปต์ที่จะทำงาน

ดังนั้น Font Awesome เป็นเครื่องมือที่มีประสิทธิภาพและสะดวกสบายที่บันทึกเวลาเค้าโครงอย่างมีนัยสำคัญและเพิ่มความเร็วให้กับเว็บไซต์ของคุณ

ข้อเสียของฟอนต์ที่ยอดเยี่ยม

เครื่องมือนี้ยังมีข้อเสีย โชคดีที่มีพวกเขาไม่มากนัก

ก่อนอื่นไอคอนสามารถทาสีได้ในสีเดียวเท่านั้น อย่างไรก็ตามข้อ จำกัด นี้สามารถหลีกเลี่ยงได้ ตัวอย่างเช่นการรวมไอคอนฟรีซึ่งกันและกัน หรือใช้เอฟเฟกต์ CSS

ประการที่สองห้องสมุดแบบอักษรที่ยอดเยี่ยมมีไอคอนมากเกินไปและทั้งหมดรวมอยู่ในไฟล์เดียว หากนักออกแบบหรือออกแบบเลย์เอาต์ต้องเชื่อมต่อไอคอนสองสามตัวเท่านั้นพวกเขายังต้องโหลดห้องสมุดทั้งหมดอย่างสมบูรณ์ และนี่คือไอคอนพิเศษนับแสนไอคอนที่จะใช้พื้นที่ อย่างไรก็ตามมีวิธีแก้ปัญหาที่นี่เช่นกัน - สร้างสมัชชาของคุณเองซึ่งจะรวมเฉพาะไอคอนที่จำเป็นเท่านั้น

ฟอนต์รุ่นที่ยอดเยี่ยม: 5 และ 6

Font Awesome 5 เปิดตัวเมื่อวันที่ 7 ธันวาคม 2017 และมีไอคอน 1278 รุ่นที่ห้ามาในสองแพ็คเกจ: ฟรี (แบบอักษรฟรีที่ยอดเยี่ยม) และชำระเงิน (แบบอักษรที่ยอดเยี่ยม Pro) แผนฟรียังมีไอคอนจากทุกรุ่นที่สี่ ไอคอนที่มีอยู่ภายใต้ใบอนุญาต SIL Open Font 1.1, Creative Commons Attribution 4.0 และ MIT

ลิขสิทธิ์ SIL Open Font (OFL-1.1) | ความคิดริเริ่มโอเพ่นซอร์ส
Creative Commons - Attribution 4.0 International - CC โดย 4.0
ใบอนุญาต MIT ความคิดริเริ่มโอเพ่นซอร์ส

Font Awesome 6 เป็นรุ่นใหม่ที่เปิดตัวในช่วงครึ่งหลังของปี 2020 มันมีไอคอนใหม่และมีเฉพาะในแผนชำระเงิน

แบบอักษรที่ยอดเยี่ยม 6 อัลฟ่ากำลังจะอยู่ในปี 2021 นี่เป็นอีกหนึ่งไอคอนไลบรารีไอคอนรุ่นใหม่ นอกเหนือจากไอคอนใหม่แล้วรุ่นที่ 6 อัลฟ่ายังเพิ่มสไตล์ใหม่บริการใหม่และเครื่องมือช่วยเหลือ ผู้ใช้สามารถสั่งซื้อล่วงหน้า

แผนฟรีและชำระเงิน: ความแตกต่างและคุณสมบัติ

คุณสามารถดาวน์โหลดไอคอนสำหรับแผนภาษีฟรีหรือชำระเงิน

แผนฟรีรวมถึงไอคอนมากกว่า 1600 ไอคอนและ 1 ชุด ชุดเป็นคอลเลกชันของไอคอนสไตล์และการตั้งค่าที่ช่วยให้คุณสามารถเปลี่ยนแปลงได้อย่างรวดเร็วโดยไม่ต้องเพิ่มรหัส

ภาษีเสียภาษี:

  • รวมถึงไอคอนมากกว่า 7800 และ 20 ชุด
  • ให้การเข้าถึงแบบอักษร Awesome Pro ซึ่งหมายความว่าไอคอนสามารถใช้ในแอปพลิเคชันมือถือเนทีฟและบนคอมพิวเตอร์ของคุณ (ตัวอย่างเช่นในโปรแกรมแก้ไขข้อความ Word หรือเมื่อสร้างงานนำเสนอใน PowerPoint)
  • ช่วยให้คุณอัปโหลดไอคอนของคุณเอง คุณสามารถใช้ไอคอนของคุณเองควบคู่ไปกับหรือแทนที่จะเป็นไอคอนที่ยอดเยี่ยมแบบอักษรอย่างเป็นทางการ ตัวอย่างเช่นนี่เป็นวิธีที่คุณสามารถอัพโหลดโลโก้ บริษัท ได้ คุณสามารถดำเนินการเดียวกันกับไอคอนของคุณเองเช่นเดียวกับการเปลี่ยนแปลงสไตล์ขนาดสี ฯลฯ

ทั้งสองรุ่นเป็นแบบถาวร นั่นคือพวกเขามีให้ครั้งเดียวและสำหรับทุกคน

วิธีการเชื่อมต่อแบบอักษรที่ยอดเยี่ยม

ก่อนอื่นคุณต้องไปที่เว็บไซต์อย่างเป็นทางการและดาวน์โหลดห้องสมุด ไฟล์เก็บถาวรที่ดาวน์โหลดจะต้องเปิดกล่องและโฟลเดอร์ CSS และแบบอักษรที่คัดลอกไปยังโฟลเดอร์ไซต์ของคุณ

หลังจากนั้นเส้นทางไปยังไฟล์ไลบรารีที่ระบุไว้ระหว่างแท็กหัว ตัวอย่างเช่น:

วิธีการแสดงไอคอนแบบอักษรที่ยอดเยี่ยมบนเว็บไซต์ วิธีการที่นิยมมากที่สุด:

1. การใช้ HTML

วิธีที่ง่ายที่สุด

คุณต้องไปที่คลังภาพบนเว็บไซต์อย่างเป็นทางการ (fontawesome.com/icons?d=gallery) และเลือกไอคอนที่คุณชอบ แต่ละไอคอนมีรหัสส่วนตัวตัวอย่างเช่น: มันเพียงพอที่จะคัดลอกและวางในตำแหน่งที่ถูกต้องในรหัส

2. ผ่าน CSS

เมื่อต้องการทำเช่นนี้ใช้องค์ประกอบหลอกหลังหรือก่อนหน้าเช่นเดียวกับ Unicode ของไอคอนที่ต้องการ คุณสามารถนำทุกอย่างไว้ในแกลเลอรี่เดียวกัน ตัวอย่างของรหัสดังกล่าว: F209

ตัวอย่างของรายการไฟล์สไตล์:

DIV :: หลังจาก {จอแสดงผล: บล็อก; เนื้อหา: 'F209'; Font-Family: 'Font Awesome 5 ฟรี';}

สรุป: ไอคอนตัวอักษรที่ยอดเยี่ยมทั้งหมด

ดังนั้น Font Awesome เป็นวิธีที่รวดเร็วและสะดวกในการเพิ่มไอคอนฟรีในเว็บไซต์ของคุณ ไอคอนทั้งหมดสามารถปรับขนาดได้ง่ายและไม่ทำให้ไซต์ช้าลง




(0)