الزيارات: Font-Awesome لتصميم موقعك

السلام عليكم ورحمة الله تعالى وبركاته

يُعتبر خط Awesome من الخطوط الممتازة لتصميم المواقع وهو الهدف الاساسي من خلاله بالتحكم بايقونات الموقع والحصول عليها بطرق بسيطة جدا وسرعة فائقة تغنيك عن برامج الفوتوشوب والايقونات المصورة.

اليوم سوف نتعلم كيفية استعمال اضافة  Font-Awesome على مواقع الويب ومدونات بلوجر

تعريف بالمكتبة 

هي مكتبة ايقونات، هذه الايقونات عبارة عن font  يتم تحكم فيها من خلال css 

لتكبير الحجم ضع مباشرة

font-size 

تتغير حجمها مع تغيير حجم خط قسم مدونتك

لتغير الون

color

تتغير لونها مع تغيير لون خط قسم مدونتك

وهناك طريقة لتغيير حجمها فقط دون تاتير على حجم خط قسمك سنراها  بعد قليل

مميزات خط Font-Awesome:

يوفر لك الخط 519 ايقونة متنوعة

التحكم بحجم الايقونات وحركاتها

إستخدامه مع css

لا تستخدم جافا سكربت

ايقونات خفيفة الوزن

تحميل اكواد المكتبة 

لتحميل اكواد المكتبة من الموقع الرسمي :

من هنا

طريقة التركيب

  1-  توجه إلى لوحة التحكم الخاصة بمدونتك.

  2-  إضغط على قالب.

  3-  ثم تحريرhtml.

  4- ابحت باستعمال Ctrl+f

</head>

ضع فوقه مباشرة

 <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

طريقة وضع الايقونات في القالب
ادهب الى
http://fortawesome.github.io/Font-Awesome/icons/
ثم ابحث عن الايقونة التي تريدها
متال:
تبحت عن ايقونة حاسوب
اضغط علي الايقونة  من تم تجد كود على هدا الشكل
<i class='fa fa-laptop'/>
انسخ هدا الكود واستعمله الاقسام الدي تريد رؤيته
تم حفظ القالب
باحجام مختلفة بسهولة
ادا اردت تغيير حجم الايقونة دون التأتير على الخط ضف الى كود الايقونة الاحجام التي تريد
 fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x
لزيادة رمز الأحجام النسبية للايقونات
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x

قسم : إضافات البلوجر

بقلـــــــم شبكة عـدناني

شبكة عدناني فيها الكثير والكثير من اطيب الكلام و أجمل القصص و أروع المواضيع، نعمل جادين لتقديم ما يفيد ، ستجدون في صفحتنا خيرا كثيرا إن شاء الله : ﴿إن اصبنا فمن الله و ان اخطأنا فمن انفسنا ومن الشيطان﴾