أهلاً بكم زوار ومتابعي المدونة الكرام
اليوم سوف نتطرق أحبائي إلى طريقة تركيب خطوط الأيقونات على مدونات بلوجر وطريقة عملها ، غالباً ما نرى المصممين يبحثون عن أشياء جديدة لإظهار تصاميمهم بثوب أو حلة جديدة ويقتصر ذلك على مصممي ومطوري المواقع، يبحثون عن خيارات وادوات من أجل تسريع تصفح الموقع وفي الأونة الأخيرة ظهرت بكثرة مواقع تقدم تسهيلات لتصميم موقع ومنها الأيقونات وهذا ما سأطرحه، ليست أي أيقونات عادية بل ستغنيك عن استخدام الصور بصفة عامة كما تشاهدون بالمدونة بها ايقونات ليست صور بل على شكل كود مثلا الأيقونات التي بالقائمة الأفقية وهو Font Awesome الخط الممتاز أقوى خطوط الأيقونات المستعملة في من طرف المصممين ولديه أكبر نسبة من مستعملين، حيث تم في البداية تخصيصه للعمل فقط على تويتر بوت ستراب Twitter Bootstarp أما الأن فالكل يستخدمه وتم تطويره وكل تحديث يتضمن أيقونات جديدة للعلم أنك يمكن التحكم بكل أيقونة من ناحية المقاس واللون والإتجاه كل شيئ .
- تعريف ايقونات خطوط font-awesome :
ايقونات الخطوط هي عبارة عن خطوط يتم تركيبها على المدونات او المواقع لكنها بدل ان تحتوي على خطوط بل تحتوي على ايقونات و ميزة هذه الخطوط انها تغنيك عن البحث عن ايقونات لمدونتك كما انها تسرع ظهور موقعك وهي عالية الجودة طبعا كما تمكنك تحريك هذه الإيقونات واضافة تاثيرات رائعة عليها بكل يسر وسهولة .
- طريقة التركيب :
1- ادخل إلى مدونتك ثم اختر لوحة التحكم .
2- من لوحة التحكم اختر قالب ثم اختر تحرير قالب .
3- ثم ابحث عت الوسم : <head>
4- ضع الكود التالي تحته .
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel='stylesheet'/> 5-احفظ القالب .
- خطوات التطبيق :
1- للحصول على اكواد أيقونات خطوط font-awesome :: أنقر هنا ::
2- بعد دخولك إلى موقع أيقونات خطوط font-awesome أنقر على أي أيقونة ترغب في إضافتها إلى مدونتك دبل اكلك .
3- بعد تضغط على الإيقونة التي تريد سوف ينقلك إلى كود الإيقونة ، نحو :
fa-bluetooth
هذا هو كود الأيقونة
<i class="fa fa-bluetooth"></i> - كما ترى الكود يحتوي على fa أخرى وهي ضرورية لتعريف الكود .
4- طريقة تكبير أو تصغير حجم الأيقونة fa-x1
fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x,fa-6x
<i class="fa fa-bluetooth fa-lg"></i>
<i class="fa fa-bluetooth fa-2x"></i>
<i class="fa fa-bluetooth fa-3x"></i>
<i class="fa fa-bluetooth fa-4x"></i>
<i class="fa fa-bluetooth fa-5x"></i>
<i class="fa fa-bluetooth fa-6x"></i> - ملحوظة مهمة / يجب ترك مسافة بين الكلمة والوسم كي لا تتداخل مع الإيقونة .
5- كيفية جعل الأيقونة تدور أو تتحرك بشكل دائري :
- نضيف رمز الدوران إلى كود الإيقونة وهو fa-spin مثال على ذلك :
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i> 6- التحكم بأتجاهات الإيقونة :
<i class="fa fa-bluetooth"></i>
<i class="fa fa-bluetooth fa-rotate-90"></i>
<i class="fa fa-bluetooth fa-rotate-180"></i>
<i class="fa fa-bluetooth fa-rotate-270"></i>
<i class="fa fa-bluetooth fa-flip-horizontal"></i>
<i class="fa fa-bluetooth fa-flip-vertical"></i>
- للمشاهدة طريقة التركيب عن طريق الفيديو :
وأخيراً نترككم برعاية الله وتوفيقه
شكرا جزيلا لك أخي :) :) .لكن لم استوعب الطريقة كثيرا ياريت لو تعمل لها فيديو تشرح فيه الخطوات....من فضلك اخي لو تكرمت ...تحياتي اخي
ردحذفتسلم اخي انا كنت منتظر هذا الدرس من زمان .وشكرا على الدعم أخي ...لكن أنا كنت أحب شرح كيف تضع هذه اايقونات في Nav bar
ردحذف