المعاينات والمرفقات
الخط
Font Awesome
هو خط تم إصداره في 21 أغسطس عام 2012 لكي يحل محل الأيقونات المستخدمه في
تصميم المواقع وتم إصداره بواسطة المطور
Dave Gandy
لكي يصبح هذا الخط في خلال ثلاث اعوام على قمة البرمجيات المستخدمه في تصميم
المواقع حيث أنه اسهل في الإستخدام كثيراً من الصور وأيضاً أسرع منها في
المعالجه بالنسبة لصفحات الويب وايضاً اكثر قابلية للتخصيص والتطوير يمكنك أن
تعتبره أفضل إبتكار في الفترة الأخيرة فيما يخص تجميل مظهر المواقع يعني إسمه
على مسمى رائع فعلاً
كيف يمكن أن نستخدم الخط
شرح هذا الامر كأنك تطلب شرح لغة برمجية لكي تتمكن من جميع إمكانيات هذا الخط فيمكن استخدامه في العديد من الأشياء لكن يمكن أن نعتبر أن اكثر ما يهم المستخدم العادي هو إضافة أيقونه بجوار رابط او كلمة وهذا امر سنتعرف عليه بأسهل طريقة ممكنهإضافة المكتبة
نضيف مكتبة الخط وسنستخدم الإصدار 4.7.0 هذا ليس أحدث اصدارات الخط والإصدارات
الجديدة تحتوي أيقونات أكثر لكن ميزة هذا الإصدار انه خفيف وسهل الإستخدام ولهذا
ما يزال الكثير يعتمدونه ولا يستخدمون الإصدارات الاحدث لانها أثقل وأصعب في
الإستخدام تضيف الكود التالي بعد الوسم <head>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />بعد إضافة المكتبة نحتاج لنعرف كيف يتم تفعيل الأيقونات , يعتمد الأمر في التفعيل على طريقتين الأولى عبر أكواد HTML والثانية عبر أكواد CSS
HTML
لإضافة الكود عبر HTML كل ما سنحتاجه هو كود الـ HTML الخاص بالأيقونة
ستجد الأكواد في هذه
الصفحة من هنــــا
يمكنك نسخ كود HTML الخاص بالأيقونة التي تعجبك
لنفترض أننا نريد اضافة الأيقونة مثلا داخل رابط
<a href="https://www.cnmu.info"><i class="fa fa-home"></i></a>
كما ترى كود HTML الخاص بالأيقونة أضفته داخل الرابط وهذا هو الناتج
CSS
عندما نضيف الأيقونة بلغة CSS نستخدم الوسم before , after
لنفترض ان لدي الرابط بهذا الشكل
<a class="AIcon" href="https://www.cnmu.info"></a>
ونريد ان نضيف له نفس الأيقونة لكن بطريقة CSS
سنستخدم الكود التالي
.AIcon::before {content:"\f015";font-family:fontawesome;font-size:20px;}
استخدمنا في الكود معرف الرابط AIcon
ثم وضعنا رمز الأيقونة المعلم بالأحمر ويمكنك أن تجلب رموز CSS من نفس الصفحة
التي وضعناها سابقاً
من هنـــا
ثم قمنا بالتعريف أن ما نسختدمه هو الخط وكذلك وضعنا حجم للأيقونة 20px
ما الفرق بين الطريقتين؟
الامر يعود لك وبحسب الاكواد التي تستعملها طبعا طريقة HTML أسهل في الإستخدام
لكن أحيانا يكون هناك أكواد لا نستطيع ان نضيف لها أكواد الأيقونات فحينها
استخدام CSS يكون المناسب لذلك الأمر سيرجع لما هو أسهل لك
الاشتراك في:
تعليقات الرسالة (Atom)
شكراا اخي لقد استفدت كتيرا كنت دائما ماأجد صعوبة في اضافة بعض الايقونات
ردحذفتصدق ب اي
ردحذفاني كل ما اعرب قالب جنب font-family الاقي FontAwesome ولما اشيلها القالب الايقونات الي في اتشالت وبقت مربعات وهبقا اتجنن دة حصل من اي
لحد ما انتا نزلت الموضوع جميل دة
سررت كثيراً بمروركم أخواى الكريمان
ردحذفوموفقين بإذن الله
موضوع قد شرح سابقا في اكثر من مدونة ولكن هنا تم شرحة بطريقة اخرى اكثر احترافية ,كبييير يا دون كن مدون
ردحذفنورت الموضوع يا برنس
حذفشكرا اخي
حذفموضوع في القمة أخي عمرو
ردحذفأخي أتمني ان تعطيني رايك
medbzm.blogspot.com
حياك الله اخي محمد
حذفشكراً لمرورك يا طيب
انت الاروع اخى شكرا لك
ردحذفموضوع جميل لجمال روحك الطاهرة يا كريم القلب والروح ♥
ردحذفالله يعزك أخي الكريم , هذا من ذوقك يا طيب شكراً لك ♥♥♥
حذف