النسخة المستخدمة ألان : 4.4.0 font awesome
يتم تحديث الموضوع باستمرار
السلام عليكم . لقد ظهر في الآونة الأخيرة font awesome وأيقوناتها
وهي بكل اختصار عبارة عن خطوط يتم التحكم فيها بحرية كاملة من خلال ال Css
مما جعل أيقونات font awesome من أفضل الأيقونات وذلك لسهولة التعديل عليها والتحكم الكامل بها
وتتميز أيقونات font awesome بالسرعة العالية الذي تفوق سرعة تحميل أيقونات الصور .
وسأقوم اليوم إن شاء الله بشرح عن طريقة إضافة هذه الأكواد في خطوتين فقط.
ويتلخص درسنا اليوم في :
بسم الله .
الخطوة الأولي إضافة رابط أيقونات font awesome إلي مدونتك .
اولا ابحث عن هذا الكود :
<head>
ثم أضف بعدة هذا الكود :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
ألان تم تعريف أيقونات font awesome في مدونة بلوجر الخاصة بك .
الخطوة الثانية : الطرق المختلفة لإدراج الأيقونات في مدونتك .
أولا ما هي الأشكال المختلفة للأيقونات وكيفية التحكم بها من خلال Html .
ويتم إضافتها علي هذا الشكل:<i class="fa fa-camera-retro"></i> أيقونة الكاميراوتظهر بهذه النتيجة .
أيقونة الكاميرا
كما تلاحظ .. يتم تعريف Class أولا ب fa وهي تعني font awesome ثم بعد ذلك يتم وضع كود الأيقونة
ودائما تكون علي هذا الشكل fa-camera-retro تبداء ب fa- ثم اسم الأيقونة .
ودائما تكون علي هذا الشكل fa-camera-retro تبداء ب fa- ثم اسم الأيقونة .
ألان كيفية التحكم في حجم أيقونات font awesome الرائعة .
من خلال إضافة fa-lg fa-2x fa-3x fa-4x fa-5x
fa-lg - صغير
fa-2x - أكبر 2
fa-3x - اكبر 3
fa-4x أكبر 4
fa-5x - أكبر ب 5
fa-2x - أكبر 2
fa-3x - اكبر 3
fa-4x أكبر 4
fa-5x - أكبر ب 5
<i class="fa fa-camera-retro fa-lg"></i> fa-lg - صغير
<i class="fa fa-camera-retro fa-2x"></i> fa-2x - أكبر 2
<i class="fa fa-camera-retro fa-3x"></i> fa-3x - أكبر 3
<i class="fa fa-camera-retro fa-4x"></i> fa-4x - أكبر 4
<i class="fa fa-camera-retro fa-5x"></i> fa-5x - أكبر 5
وتظهر الأيقونات حسب الأحجام بهذا الأشكال
fa-lg - صغير
fa-2x - أكبر 2
fa-3x - أكبر 3
fa-4x - أكبر 4
fa-5x - أكبر 5
من خلال إضافة fa-spin الي وسم class الخاص ب font awesome
حتى يصبح الكود بهذا الشكل :
fa-2x - أكبر 2
fa-3x - أكبر 3
fa-4x - أكبر 4
fa-5x - أكبر 5
ألان كيفية جعل أيقونة font awesome في حركة دائرية .
من خلال إضافة fa-spin الي وسم class الخاص ب font awesome
حتى يصبح الكود بهذا الشكل :
<li><i class="fa fa-spinner fa-spin"></i>دائرة التحميل</li>
<li><i class="fa fa-cog fa-spin"></i>دائرة التحميل</li>
وتظهر بهذا الشكل :
كيفية إضافة رابط داخل أيقونة font awesome
أضف هذا الكود :
<a href="#"><i class="fa fa-home fa-fw"></i> الصفحة الرئيسية</a>
<a href="#"><i class="fa fa-book fa-fw"></i> المكتبة</a>
<a href="#"><i class="fa fa-pencil fa-fw"></i> الإضافات</a>
<a href="#"><i class="fa fa-cog fa-fw"></i> الاعدادات</a>
ويظهر بهذا الشكل
الصفحة الرئيسية المكتبة الإضافات الاعدادات
كيفية التحكم في اتجاهات أيقونات font awesome .
<i class="fa fa-shield"></i> الايقونة العادية<br>
<i class="fa fa-shield fa-rotate-90"></i>تدوير بنسبة 90 درجة<br>
<i class="fa fa-shield fa-rotate-180"></i> تدوير بنسبة 180 درجة<br>
<i class="fa fa-shield fa-rotate-270"></i> تدوير بنسبة 270 درجة<br>
<i class="fa fa-shield fa-flip-horizontal"></i> تغير الاتجاه بالعكس أفقي<br>
<i class="fa fa-shield fa-flip-vertical"></i> تغير الاتجاه بالعكس رأسي
يظهر بهذا الشكل
الأيقونة العادية
تدوير بنسبة 90 درجة
تدوير بنسبة 180 درجة
تدوير بنسبة 270 درجة
تغير الاتجاه بالعكس أفقي
تغير الاتجاه بالعكس رأسي
سيظهر لك الموقع الكثير من الأيقونات اختر الأيقونة الذي تريد ثم اضغط عليها وليكن مثلا هذه الأيقونة :
بعد ذلك سيظهر لك اسم هذا الأيقونة كما في الصورة :
وهذا هو اسم الأيقونة :
fa-caret-square-o-right
والي هنا انتهي درس اليوم عن كيفية إضافة أيقونات font awesome في مدونة بلوجر وكذلك الطرق المختلفة للتعديل عليها .. السلام :)
fa-caret-square-o-right
والي هنا انتهي درس اليوم عن كيفية إضافة أيقونات font awesome في مدونة بلوجر وكذلك الطرق المختلفة للتعديل عليها .. السلام :)
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لاضافة كود حوله اولا بمحول الاكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة محول الأكوادمحول الأكواد الإبتساماتالإبتسامات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.