كيفية الوجه / النطاق / جريئة وغير ذلك من الأيقونات الخاصة بك Fontawesome

لذا فإن تطبيقك يستخدم رموز Fontawesome لكن يبدو أنها تشبه كل التطبيقات الأخرى وتحتاج إلى شيء أكثر تخصيصًا. كنت في القارب نفسه وقضيت وقتًا في البحث عن كيفية إلقاء نظرة خاصة بي. في ما يلي بعض الطرق التي وجدتها للتقليب والتدوير والقياس والخط والرسم والتلوين وجعل رموز Fontawesome لديك أكثر. بعض الفئات مدعومة من Fontawesome وبعضها من CSS.

يواجه

بنيت Fontawesome في دعم لاحتياجات التقليب المشتركة عبر فئتين:

fa-flip- * (الخيارات: أفقية ، رأسية)
 
 

استدارة

الشيء نفسه بالنسبة للتدوير والاتجاهات الأساسية:

fa-rotate- (الخيارات: 90 ، 180 ، 270)
 
 
 

أكبر

قامت Fontawesome أيضًا بتغطيتك إذا كنت ترغب في زيادة أيقوناتك لجعلها أكبر. قم ببساطة بإضافة فئات مدعومة للحجم القياسي ، 2x ، 3x ، 4x ، و 5x بالحجم القياسي:

fa- * (الخيارات: lg ، 2x ، 3x ، 4x ، 5x)
  fa-lg
  fa-2x
  fa-3x
  fa-4x
  fa-5x

الأصغر

ولكن ماذا لو كنت بحاجة إلى تقليل الرموز الخاصة بك لتناسب التصميم الخاص بك ، نموذج ، أو تراكب على الرموز الأخرى؟ لا تقدم Fontawesome فصولًا لذلك. ومع ذلك ، نظرًا لأنه يتم عرض الرموز كخط ، يمكنك إضافة أي CSS تستخدمه عادة لتوسيع حجم الخط لتكبير الرمز:

ما عليك سوى إنشاء فئة CSS (مع أي مستوى من الخصوصية تحتاج إلى انتزاع الرمز / الرابط) واستهداف ذلك إلى محدد الرمز:

.fa-search {
  حجم الخط: 0.5em ؛
}
 

Fontawesome يهتم بحق الكثير عن إمكانية الوصول. أظن هنا أن أي شيء أقل من الحجم القياسي يمكن أن يسبب مشاكل لبعض المستخدمين ويجب استخدامه فقط لعناصر التصميم غير الأساسية بدلاً من UX الحرجة.

اللون

ما عليك سوى استخدام CSS المخصص في الفصل الدراسي وأنت على ما يرام. نحن هنا نطبق كلاً من حجم الخط واللون على أيقونة مقلوبة أفقياً كمثال:

.fa-search {
  حجم الخط: 3.0em ؛
  اللون الازرق؛
}
 

يمكنك بالطبع تطبيق تأثيرات التحويم المعتادة على إحداث تغيير في اللون وتحجيمه في وضع التحويم حتى تنبثق أيقوناتك.

جريئة / الضوء

هذا هو المكان الذي نحيد فيه عن الطريق وتبدأ الأمور في الاختراق قليلاً. حتى الآن ، كنا نستخدم (1) أنماط الخطوط القياسية (2) المتوفرة من Fontawesome من CSS. الآن سنستخدم بعض تأثيرات الخطوط الأقل توافقًا للمتصفح لإضافة بعض التخصيص الإضافي. في الواقع ، اعتبارًا من تموز (يوليو) 2016 ، هذا هو مخطط التوافق للأحجار أدناه التي يستخدمها جميع -webkit-text-stroke:

لا مفاجأة ، لا IE. الآن ، مع ذلك!

Fontawesome ليس لديه فئة جريئة. ولن تعتقد أنك ستحتاج إليها. لكنني وجدت نفسي أرغب في مطابقة عرض السكتة الدماغية على بضعة أيقونات متقاربة بشكل مختلف لجعلها تنسق بشكل أفضل قليلاً. قد ترغب أيضًا في القيام بذلك لتنسيق النص المجاور الذي يحتوي على حد أكثر سمكًا أو نحافة من رمز Fontawesome الخاص بك.

ما ورد أعلاه يطبق حد لون في الخلفية لجعل الأيقونة رفيعة أو حد لون الخط لجعل الأيقونة سميكة.

.fa-search {
  الكتابة النصية - السكتة الدماغية: 2px الأبيض ؛ /* لون الخلفية */
  اللون الازرق؛
}
.fa-search {
  الكتابة النصية - السكتة الدماغية: 3px الأزرق ؛ /* لون الخط */
  اللون الازرق؛
}

الخطوط العريضة

يمكنك حتى الجمع بين السكتة الدماغية وملء للحصول على تأثير اللون أو الخطوط العريضة:

.fa-search {
  الكتابة النصية - السكتة الدماغية: 2px الأزرق ؛
  -webkit-text-fill-colour: cyan؛
}

فقط تذكر مرة أخرى أن هذا لن يجلب لك توافق المتصفح. (قيل لي إن بإمكانك القيام ببعض التجارب باستخدام الظلال النصية في IE لرفع مستوى التطبيق بالكامل ...)

هذا هو!

بمساعدة فصول Fontawesome المضمنة و CSS المخصص الخاص بك ، أنت جاهز لجعل رموزك منبثقة.