لاشك ان اهم ما في اي موقع او مدونة هو المحتوي ولكن احياناً يحتاج المحتوي و الموقع الي ايقونات وصور تزيد من جمالية الموضوع وجمال المدونة, موضوع حلقة اليوم عن المكتبة الشهيرة الغنية عن التعريف Font AweSome لا نطيل عليكم في المقدمة وهيا الي الشرح.
شرح مكتبة Font AweSome
مكتبة Font AweSome هي مكتبة ايقونات تحتوي علي اكثر من 1600 ايقونة مجانية و أكثر من 6000 ايقونة مدفوعة ما سنقدمه اليوم هو ايقونات Font AweSome المجانية والتي يمنك استخدامها بحرية دون ذكر حقوق الموقع مطلقاً وهذا ما يمزيها وايضاً ما يمزها انها تقدم لك ايقونات متجاوبة ومرنة وسهلة الإستخدام.
تركيب مكتبة Font AweSome
تركيب المكتبة سهل للغاية ولا يحتاج لمعرفة بالأكواد البرمجية لن تحتاج الي كتابة اكواد فقط كل ما عليك فعله هو وضع كود تضمن المكتبة فوق وسم إغلاق </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
شرح استخدام ايقونات المكتبة
يمكنك استخدام ايقونات المكتبة بطريقتين إما باستخدام معرف Html او بإستخدام Unicode بواسطة CSS إليك الطريقتين.
بعد اضافة المكتبة الي القالب قم بإختيار اي ايقونة من الموقع وقم بنسخ عنصر html الموجود بصفحة الأيقونة كما هو موضح في الصورة.
<i class="fas fa-apple-alt"></i>
بعد نسخ هذا العنصر قم بلصقة في المكان الذي تريد ان يظهر فيه سواء داخل موضوع او في الصفحة الرئيسية من المدونة او داخل اداة في المدونة فقط عليك تحديد المكان الذي سوق تلصق فيه الأيقونة.
هناك طريقة وهي عن طريق نسخ Unicode الموجود جانب عنصر html ولقصقه داخل الخاصية Content تطبق علي العنصرين الزائفين
beforeafterوتكون علي هذا الشكل:
.ClassName {
content: "\f5d1";
font-family: FontAwesome;
}
يمكنك استخدام اي طريقة منهم لا يهم ولكن عليك ان تختار الأيقونات المناسبة ولا تقم بوضعها باستمرار وفي كل مكان في مدونتك حتي لا تصير مدونتك كالمهرج.


تعليقات
إرسال تعليق