لماذا يجب عليك البدء في استخدام Font Awesome

Font Awesome عبارة عن مجموعة أيقونات قوية تحتوي على أيقونات قابلة للتطوير. ومن المدهش أنها مجانية (قد تكون مجموعات الأيقونات باهظة الثمن، مما يجعلها صفقة رائعة). تأتي Font Awesome مع العديد من أنواع الأيقونات المهمة: الوسائط الاجتماعية، وواجهة المستخدم/الويب، والمزيد!

تُعد الأيقونات مهمة لمشاريع الويب لأنها طريقة بصرية للمساعدة في إضافة المعنى إلى العناصر. يتيح لك Font Awesome الإضافة بسهولة إلى سمة WordPress الخاصة بك، مما يوفر وقتاً ثميناً لأنك لست بحاجة إلى إنشاء هذه الرسومات وحفظها بنفسك.

يعد Font Awesome رائعاً لأنه…

إنه خط

من الاسم، من الواضح جداً ما هو التنسيق، ولكن هذا ما يجعل Font Awesome أنيقاً للغاية. كما تعلم، هناك خيارات أخرى بدلاً من استخدام الخط لعرض الرموز. قد تكون على دراية بأساليب أخرى مثل استخدام صور فردية أو أوراق رسومية خاصة بالموقع للرموز. سواء كانت SVG أو نقطية أو خطاً، فإن رسومات الأيقونات عبارة عن سلسلة من الصور المستخدمة في أجزاء معينة من الموقع. قد تكون هذه الأجزاء عبارة عن شريط البحث أو التنقل أو أيقونات التحميل أو أي مكان آخر حيث تكون رسومات المؤشرات مناسبة.

سهل التنسيق ومتوافق مع الشاشات

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

متصفحات Dig Font Awesome

لا داعي للقلق بشأن توافق Font Awesome مع المتصفحات فهو مدعوم جيداً من قبل جميع المتصفحات الحديثة. ومع تضمين جميع تنسيقات الملفات (.eot، و.ttf، و. woff، وsvg)، يتم التعامل معه بنفس الطريقة التي يتم التعامل بها مع الخطوط الأخرى على الويب.

إنها تتمتع بميزة الأداء

نحن جميعاً نحب مواقع الويب السريعة، لذا من المهم توفير هذه التجربة لمستخدميك. يتم تضمين جميع الأيقونات في ملف خط واحد، لذا فإن الأمر يتطلب طلب HTTP واحداً فقط لتحميل Font Awesome. وهذا أمر رائع لتحسين الأداء، لذا فإن الأمر يستحق التفكير في Font Awesome كحل.

Font Awesome في العمل

ربما تكون معتاداً على الأحرف العادية أو أحد الخطوط التي تستخدمها في الكتابة اليومية. فالأحرف مثل “A” و”B” و”C” وما إلى ذلك تشكل جزءاً من اتصالاتك اليومية. أما خطوط الأيقونات فهي تشبه أي خط آخر، باستثناء أن الأحرف مصممة لتبدو مثل الأيقونات. ويحدد الخط الأحرف الموجودة داخل الموقع، والتي يتم تحسينها من خلال هذه الأيقونات المرسومة.

استخدام الأيقونات في HTML

إذا ألقيت نظرة على ملف CSS، فستجد أننا نستخدم محدد CSS3: before، الذي يقوم بإدراج المحتوى قبل كائن HTML الذي يتم تطبيق الفئة عليه. تُستخدم خاصية المحتوى لتحديد حرف Unicode، كما يمكنك أن ترى من خلال سلسلة الأحرف هذه.

ما الذي يحدث هنا؟ لعرض أيقونة، نحتاج إلى فئة fa. هذا ما “يربطها” بخط Font Awesome. لعرض الأيقونة الصحيحة، سيتوافق اسم الفئة الثانية مع الأيقونة التي ترغب في عرضها، في هذه الحالة يكون fa-cloud (لاحظ مرجع Unicode، الذي ذكرناه سابقاً).

إقرأ أيضاً: مراجعة DNet.sa: نظرة على مسجل النطاقات في المملكة العربية السعودية

لعرض السحابة، هذا هو سطر التعليمات البرمجية المطلوب:

<i class="fa fa-cloud"></i>

هل تريد أن يظهر هذا بجوار النص؟ إذا كان الأمر كذلك، فأنت محظوظ. فقط اجعله جزءاً من الفقرة.

<p><i class="fa fa-cloud"></i> This is a cloud.</p>

إضافة الروابط سهلة أيضاً:

<a class="fa fa-twitter" href="http://twitter.com/morelink" title="Twitter" target="_blank"> Twitter</a>

الاستخدام الزائف مع المحتوى

قد تكون هناك مناسبات حيث يكون من الأكثر فعالية استخدام الفئة الزائفة. على سبيل المثال، إذا كانت الفئة ستُستخدم كثيراً، فسيكون هذا النهج أكثر كفاءة. سيبدو الأمر على هذا النحو:

.intro .widget-title:before {

font-family: FontAwesome;

padding-right: 10px;

content: "\f05a";

}

لاحظ أن المحتوى هو مرجع Unicode للفقاعة الكلامية.

خيارات أكثر عملية

يقدم Font Awesome أكثر مما قد يدركه المصممون. فمن السهل تدوير الرموز وتغيير حجمها وسحبها. كما تأتي بعض خيارات الرسوم المتحركة جاهزة للاستخدام.

بإضافة class بسيط، من السهل أن تحب هذه الرموز الدائرية:

<i class="fa fa-heart"></i> normal<br>
<i class="fa fa-heart fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-heart fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-heart fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-heart fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-heart fa-flip-vertical"></i> icon-flip-vertical

مقتنع؟

من السهل معرفة السبب وراء حب العديد من المصممين لـ Font Awesome – جرّبه في تصميمك التالي لترى ما إذا كنت ستحبه أيضاً!