كيفية إضافة أيقونات font awesome في مدونة بلوجر في خطوتين
كيفية إضافة أيقونات font awesome في مدونة بلوجر في خطوتين
النسخة المستخدمة ألان : 4.4.0 font awesome
يتم تحديث الموضوع باستمرار
السلام عليكم . لقد ظهر في الآونة الأخيرة font awesome وأيقوناتها
وهي بكل اختصار عبارة عن خطوط يتم التحكم فيها بحرية كاملة من خلال ال Css
مما جعل أيقونات font awesome من أفضل الأيقونات وذلك لسهولة التعديل عليها والتحكم الكامل بها
وتتميز أيقونات font awesome بالسرعة العالية الذي تفوق سرعة تحميل أيقونات الصور .
وسأقوم اليوم إن شاء الله بشرح عن طريقة إضافة هذه الأكواد في خطوتين فقط.
ويتلخص درسنا اليوم في :
1 - إدراج رابط أيقونات font awesome إلي المدونة .
2 - طريقة إضافة الأيقونات بأشكالها المختلفة ,
3 - كيفية استخراج الأيقونات من مكتبة ايقونات 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-school-retro"></i> أيقونة المدرسة
وتظهر بهذه النتيجة .
أيقونة الكاميرا
كما تلاحظ .. يتم تعريف Class أولا ب fa وهي تعني font awesome ثم بعد ذلك يتم وضع كود الأيقونة
ودائما تكون علي هذا الشكل 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
<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
ألان كيفية جعل أيقونة 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 درجة
تغير الاتجاه بالعكس أفقي
تغير الاتجاه بالعكس رأسي
ألان كيفية استخراج الأيقونات من مكتبة أيقونات font awesome .
توجه إلي :
موقع ايقونات font awesome
سيظهر لك الموقع الكثير من الأيقونات اختر الأيقونة الذي تريد ثم اضغط عليها وليكن مثلا هذه الأيقونة :
كيفية إضافة أيقونات font awesome في مدونة بلوجر في خطوتين
بعد ذلك سيظهر لك اسم هذا الأيقونة كما في الصورة :
كيفية إضافة أيقونات font awesome في مدونة بلوجر في خطوتين
وهذا هو اسم الأيقونة :
fa-caret-square-o-right
والي هنا انتهي درس اليوم عن كيفية إضافة أيقونات font awesome في مدونة بلوجر وكذلك الطرق المختلفة للتعديل عليها .. السلام :)
المصدر : ويب بلوجرام
https://blog3web.blogspot.com/2015/12/font-awesome.html
تعليقات
إرسال تعليق