fa icon chooser

منتقي أيقونة الخط الرائع

مكون ويب تم إنشاؤه باستخدام Stencil، لاستخدامه في المشاريع الأخرى التي ترغب في توفير تجربة بحث واكتشاف Font Awesome Icon.

إنه مدعوم بنفس بحث Algolia مثل معرض Font Awesome Icon.

يتم استخدامه، على سبيل المثال، في البرنامج الإضافي الرسمي لـ Font Awesome في WordPress.

يتطلب استخدام هذا المكون تطوير الواجهة الأمامية مباشرةً في JavaScript وDOM. إنه مخصص للمطورين الذين يقومون بدمج Font Awesome في تطبيقاتهم ومكوناتهم.

ملخص

يمكن تكوين منتقي الأيقونات للعمل مع Font Awesome Kit، باستخدام الرمز الفريد لهذه المجموعة، أو بدون مجموعة، مع إعطاء رقم إصدار Font Awesome فقط.

في الوضع غير المعد، يتوفر فقط Font Awesome Free.

عند استخدامه مع مجموعة، يكون كل شيء متاحًا، وفقًا لتكوين هذه المجموعة.

• الخط رائع برو

• الخط رائع 6

• تحميلات أيقونات المجموعة: أي أيقونات تم تحميلها إلى المجموعة متاحة في أداة الاختيار.

يقوم المستخدم بتكوين مجموعته الخاصة في صفحة إعدادات هذه المجموعة على Fontawesome.com ويقوم بإنشاء رمز واجهة برمجة التطبيقات (API Token) الذي يسمح بالوصول إلى إعدادات المجموعة الخاصة به عبر GraphQL API.

يوفر المستخدم رمز المجموعة ورمز واجهة برمجة التطبيقات (API) إلى التعليمات البرمجية الخاصة بك. يوفر الكود الخاص بك رمز المجموعة كدعم لـ fa-icon-chooser . يستخدم الكود الخاص بك رمز API للحصول على رمز وصول من نقطة نهاية الرمز المميز، ثم يستخدم رمز الوصول الناتج للسماح بأي استعلامات في وظيفة رد الاتصال handleQuery() الخاصة بك.

أنت تقدم تطبيقاتك الخاصة لعدد قليل من وظائف رد الاتصال المختلفة للتعامل مع الاستعلامات ونتائج تفاعل المستخدم مع منتقي الأيقونات.

مثال التفاعل

1. يتخذ المستخدم بعض الإجراءات في تطبيقك لإدراج رمز Font Awesome، مثل النقر على زر "إدراج رمز".
2. يقوم الكود الخاص بك بتثبيت منتقي الأيقونات هذا مما يوفر مختلف الدعائم المطلوبة ويستمع إلى حدث finish الذي سيتم إطلاقه في DOM.
3. يستخدم الكود الخاص بك كائن IconChooserResult الذي تم تسليمه بواسطة هذا الحدث لعرض النتائج التي يختارها المستخدم.

على سبيل المثال، قد تكون نتيجة IconChooserResult :

 { prefix : "fad" , iconName : "alien" }

إذا كانت شفرتك عبارة عن تطبيق React يستخدم مكون FontAwesomeIcon ، فيمكنك إنشاء هذا:

 < FontAwesomeIcon icon = { [ prefix , iconName ] } / >

إذا كانت التعليمات البرمجية الخاصة بك مكتوبة بلغة JavaScript وتحتاج إلى إنشاء عنصر HTML كسلسلة، فقد تبدو كما يلي:

 const icon = `<i class=" ${ prefix } ${ iconName } "></i>`

إذا كان الكود الخاص بك عبارة عن مكون إضافي أو سمة WordPress، فقد ينتج عنه رمزًا قصيرًا مثل هذا:

 const icon = `[icon prefix=" ${ prefix } " name=" ${ iconName } "]` 

يثبت

اختر واحدًا مما يلي:

1. استخدم مكون الويب fa-icon-chooser مباشرة. ابحث عن تعليمات الإعداد هذه في حزمة هذا المكون.
2. استخدم تكامل إطار عمل JavaScript. حاليًا، الوحيد المتاح هو React.

المساهمين

فريق الخط الرائع:

	اسم	جيثب
	مايك ويلكرسون	@mlwilkerson
	فرانسيس بوتسفورد	@فررنسس
	كيلسي جاكسون	@kelseythejackson