09‏/09‏/2014

دائما ما ترى المصممين يبحثون عن أشياء جديدة لإظهار تصاميمهم بحلة جديدة ويقتصر ذلك على مصممي ومطوري المواقع، يبحثون عن خيارات وادوات من أجل تسريع تصفح الموقع وفي الأونة الأخيرة ظهرت بكثرة مواقع تقدم تسهيلات لتصميم موقع ومنها الأيقونات وهذا ما سأطرحه، ليست أي أيقونات عادية بل ستغنيك عن استخدام الصور بصفة عامة كما تشاهدون بالمدونة بها ايقونات ليست صور بل على شكل كود مثلا الأيقونات التي بالقائمة الأفقية وهو Font Awesome الخط الممتاز أقوى خطوط الأيقونات المستعملة في من طرف المصممين ولديه أكبر نسبة من مستعملين، حيث تم في البداية تخصيصه للعمل فقط على تويتر بوت ستراب Twitter Bootstarp أما الأن فالكل يستخدمه وتم تطويره وكل تحديث يتضمن أيقونات جديدة للعلم أنك يمكن التحكم بكل أيقونة من ناحية المقاس واللون والإتجاه كل شيئ لذا لنتابع طريقة عمله
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن </head>
3. ضع الكود التالي فوقه
* الكود التالي عبارة عن ملف جيكويري يحتوي على جميع الأيقونات نسخة : 4.0.3
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
4. بعد إضافة الكود تتبقى لنا خطوة التطبيق
* كل كود لديه إسم خاص به للأيقونة مثلا :

fa-html5
<i class="fa fa-html5"></i>
5. كما تلاحظون في الكود فهو يحتوي على fa اخرى لتعريف الكود وهي ضرورية
6. المرحلة التالية سنرى طريقة تكبير الأيقونات للعلم توجد طريقة أخرى
لتكبير أو تصغير حجم الأيقونة سنضيف القيمة fa-x1
fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x
fa-html5
fa-html5
fa-html5
fa-html5
fa-html5
<i class="fa fa-html5 fa-lg"> مثال </i> 
<i class="fa fa-html5 fa-2x"> مثال</i>
<i class="fa fa-html5 fa-3x"> مثال</i>
<i class="fa fa-html5 fa-4x"> مثال</i>
<i class="fa fa-html5 fa-5x"> مثال</i> 
* يجب ترك مساحة بين الكلمة والوسم لكي لا تتداخل مع الأيقونة
7. في هذه المرحلة سنضيف خاصية تحريك الأيقونة واتي تجعل مثلا دائرة تدور وهي تستخدم فقط لرموز الدائرة مثال :






<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
* أضفنا وسم الرمز مع الأيقونة زائد رمز لدوران وهو fa-spin
8. المرحلة التالية هي خاصة بالإتجاهات أمثلة :
 عادي
 إتجاه-90 درجة
أفقي 180 درجة
عمودي على اليمين 270 درجة
أفقي عادي
 عمودي عادي

* أضفنا وسم الرمز مع الأيقونة زائد رمز الإتجاه وهو : fa-rotate
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90">
<i class="fa fa-shield fa-rotate-180">
<i class="fa fa-shield fa-rotate-270">
<i class="fa fa-shield fa-flip-horizontal">
<i class="fa fa-shield fa-flip-vertical">
9. دائما إذا اردت تطبيق الإتجاه أو الدوران أو التكبير كما في المراحل السابقة كل ما عليك إضافته هو الرمز بعد fa fa-Exempl
الكود التالي يخص الستايل Css ويمكن التحكم بالأيقونة من الحجم والإتجاه والمسافة بدون أن تضيف
<i class="fa fa-html5"></i> هذا الشرح لمن يعرف التعامل مع الأكواد
/* ar1web */ 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
/*--custom  CSS--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    left: 0;
}
التغييرات الهامة :
* الكلمة element ينبغي تغييرها بمعرف الإضافة
* المحدد بالأصفر يخص كود الأيقونة
* المحدد بالأحمر خاص باللون
* المحدد بالأزرق يخص الحجم
* المحدد بالبرتقالي يخص المسافة بين الكلمة والأيقونة
* المحدد بالوردي يخصل الإتجاه left - right
للحصول على الأيقونات أدخل لموقع Font-Awesome ولتحصل على كود الأيقونة الذي يُستعمل في أكواد Css ستجده مكتوب بداخل صفحة الأيقونة المختارة مثلا ستلاحظ f219 في هذه الصفحة Diamond
أتمنى أن يكون الشرح وافي ومفهوم نلتقي في دروسنا القادمة بإذن الله
دائما ما ترى المصممين يبحثون عن أشياء جديدة لإظهار تصاميمهم بحلة جديدة ويقتصر ذلك على مصممي ومطوري المواقع، يبحثون عن خيارات وادوات من أجل تسريع تصفح الموقع وفي الأونة الأخيرة ظهرت بكثرة مواقع تقدم تسهيلات لتصميم موقع ومنها الأيقونات وهذا ما سأطرحه، ليست أي أيقونات عادية بل ستغنيك عن استخدام الصور بصفة عامة كما تشاهدون بالمدونة بها ايقونات ليست صور بل على شكل كود مثلا الأيقونات التي بالقائمة الأفقية وهو Font Awesome الخط الممتاز أقوى خطوط الأيقونات المستعملة في من طرف المصممين ولديه أكبر نسبة من مستعملين، حيث تم في البداية تخصيصه للعمل فقط على تويتر بوت ستراب Twitter Bootstarp أما الأن فالكل يستخدمه وتم تطويره وكل تحديث يتضمن أيقونات جديدة للعلم أنك يمكن التحكم بكل أيقونة من ناحية المقاس واللون والإتجاه كل شيئ لذا لنتابع طريقة عمله
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن </head>
3. ضع الكود التالي فوقه
* الكود التالي عبارة عن ملف جيكويري يحتوي على جميع الأيقونات نسخة : 4.0.3
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
4. بعد إضافة الكود تتبقى لنا خطوة التطبيق
* كل كود لديه إسم خاص به للأيقونة مثلا :

fa-html5
<i class="fa fa-html5"></i>
5. كما تلاحظون في الكود فهو يحتوي على fa اخرى لتعريف الكود وهي ضرورية
6. المرحلة التالية سنرى طريقة تكبير الأيقونات للعلم توجد طريقة أخرى
لتكبير أو تصغير حجم الأيقونة سنضيف القيمة fa-x1
fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x
fa-html5
fa-html5
fa-html5
fa-html5
fa-html5
<i class="fa fa-html5 fa-lg"> مثال </i> 
<i class="fa fa-html5 fa-2x"> مثال</i>
<i class="fa fa-html5 fa-3x"> مثال</i>
<i class="fa fa-html5 fa-4x"> مثال</i>
<i class="fa fa-html5 fa-5x"> مثال</i> 
* يجب ترك مساحة بين الكلمة والوسم لكي لا تتداخل مع الأيقونة
7. في هذه المرحلة سنضيف خاصية تحريك الأيقونة واتي تجعل مثلا دائرة تدور وهي تستخدم فقط لرموز الدائرة مثال :






<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
* أضفنا وسم الرمز مع الأيقونة زائد رمز لدوران وهو fa-spin
8. المرحلة التالية هي خاصة بالإتجاهات أمثلة :
 عادي
 إتجاه-90 درجة
أفقي 180 درجة
عمودي على اليمين 270 درجة
أفقي عادي
 عمودي عادي

* أضفنا وسم الرمز مع الأيقونة زائد رمز الإتجاه وهو : fa-rotate
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90">
<i class="fa fa-shield fa-rotate-180">
<i class="fa fa-shield fa-rotate-270">
<i class="fa fa-shield fa-flip-horizontal">
<i class="fa fa-shield fa-flip-vertical">
9. دائما إذا اردت تطبيق الإتجاه أو الدوران أو التكبير كما في المراحل السابقة كل ما عليك إضافته هو الرمز بعد fa fa-Exempl
الكود التالي يخص الستايل Css ويمكن التحكم بالأيقونة من الحجم والإتجاه والمسافة بدون أن تضيف
<i class="fa fa-html5"></i> هذا الشرح لمن يعرف التعامل مع الأكواد
/* ar1web */ 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
/*--custom  CSS--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    left: 0;
}
التغييرات الهامة :
* الكلمة element ينبغي تغييرها بمعرف الإضافة
* المحدد بالأصفر يخص كود الأيقونة
* المحدد بالأحمر خاص باللون
* المحدد بالأزرق يخص الحجم
* المحدد بالبرتقالي يخص المسافة بين الكلمة والأيقونة
* المحدد بالوردي يخصل الإتجاه left - right
للحصول على الأيقونات أدخل لموقع Font-Awesome ولتحصل على كود الأيقونة الذي يُستعمل في أكواد Css ستجده مكتوب بداخل صفحة الأيقونة المختارة مثلا ستلاحظ f219 في هذه الصفحة Diamond
أتمنى أن يكون الشرح وافي ومفهوم نلتقي في دروسنا القادمة بإذن الله
15 Blogger تعليقات
Disqus
15 التعليقات
المشرف
avatar

شكرا
http://3rabtech-show.blogspot.com/

المشرف
avatar

ممكن درس لعمل قائمة مثل التي بمدونتك لاني لم افلح في عمل مثلها

المشرف
avatar

إن شاء الله

المشرف
avatar

ممكن طريقة اضافة كود المشاركة جانبه اعلان مثل الموجود عندك

المشرف
avatar

أي مشاركة جانبية إعلان !!!

المشرف
avatar

kifach nbedel lkhalfiya dyal l'icon

المشرف
avatar

kandirha okatla3 farkh machi nejma

المشرف
avatar
yasmine Ahmed 12/27/2014
delete

حضرتك شرحت كتير اوى وجزاك الله خيرً بس انا عايزة افهم عايزة احط ايقونة بجانب كلمة اعمل ايه

المشرف
avatar

لقيتلك قالب فيديو روعة ...قمة الجمال

وقريبا ان شاء الله هعربه
http://videoismtheme.blogspot.com

المشرف
avatar
Ahmed Elemam 2/07/2015
delete

من كلامك شكلك مصرية (:

المشرف
avatar

شكرا لك اخي الكريم متتصورش فرحتي بالي كاين عربي كيفك كا يشجعنا على التدوين يعني صراحة انت هزيت ليا قلبي الله يخليك خويا لينا والله يفرحك كيما فرحتنا والله يقوي عزيمتك ♥_♥ (;

المشرف
avatar

وشكرا لسيادتكم على المرور والكلمات الطيبة, تحياتي ♥

المشرف
avatar

ربنا يباركلك..

المشرف
avatar

لنا ولك أخي الكريم

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة