السلام عليكم أحبابي في الله، كما و سبق لي أن وضعت موضوع حول الأيقونات المتحركة و التي يتيحها لك موقع Moveicon، في هذا الموضوع سوف نتطرق إلى مكتبة اخرى و موقع يقدم لك مجموعة كبيرة من الأيقونات الإحترافية و التي يمكنك استعمالها في مواقعك على الويب.
مكتبة الـFont Awesome تحتوي على أيقونات ليس كباقي الأيقونات التي يمكنك تحميلها على بعض المواقع كـiconfinder أو flaticon، لنفترض أنك قمت بتحميل أيقونة من بعض الموقع كالتي ذكرتها بغرض وضعها في موقعك أو في قالب مدونتك، طبعا إذا أردت تغيير اللون عليك استعمال بعض برامج تحرير الصور و من بينها الفوتوشوب، يعني أنك سوف تتعب في ذالك، زيادة على ذالك إذا أردت تغيير حجم الأيقونة فهذه الأخيرة سوف تفقد جودتها، كلما قمت بتكبير الأيقونة كلما تغيرت جودتها الى أن تصبح رديئة. كما في المثال التالي :
مكتبة الـFont Awesome تحتوي على أيقونات من جميع الأصناف تقربيا، تعمل مع البوستراب أيضا، ميزة أخرى كبيرة ألا وهي مرونة الاستخدام. بحث يمكنك زيادة حجم الأيقونة دون تدهور جودتها، مكتبة الـFA تترك لك كل الحرية في التلاعب بالأيقونات، تغيير حجمها، لونها، جعلها متحركة بحركة دائرية و كل هذا دون فقدان جودة الأيقونة سواء عند عرضها على الحاسوب أو على الهواتف الذكية أو التابلت.
المكتبة تحتوي لحد كتابة هذا الموضوع على 605 أيقونة، يتحيها لك الموقع مجانا.
طريقة استخدام المكتبة في موقعك :
1- بالنسبة لقوالب بلوجر :
إن كنت مطور قوالب بلوجر و تريد إضافة المكتبة إلى القوالب التي تصممها، كخطوة اولى ماعليك سوى التوجه الى المدونة، ثم قالب و من ثم تحرير HTML و تبحث عن بداية فتح وسم الـhead ثم تضيف تحته الكود التالي :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
و كخطوة ثانية، بعد حفظ القالب طبعا، ماعيك سوى أخد كود أو رمز الأيقونات التي تريد استعمالها من الموقع ووضعها في المكان الذي تريد في القالب، كمثال :
سوف أخد كود الأيقونة التالية (نجمة).
<i class="fa fa-star"></i>و قمت بإضافتها إلى الرابط التالي :
<a href="www.najmacode.com" target="_blank"><i class="fa fa-star"></i></a>
يعني أن الأيقونة سوف تحتوي على الرابط الذي قمنا بوضع داخله الأيقونة، أمر جد بسيط و ينطبق على جميع الخصائص الأخرى التي تعلمتها في دورة الـHTML.
الأن كيف نضيف لها الستايل ؟ اللون، و الحجم و.. :
لتحديد جميع الأيقونات التي وضعتها في قالب مدونتك و حتى يتم تطبيق الستايل على جميعها قم بوضع :
لتحديد جميع الأيقونات التي وضعتها في قالب مدونتك و حتى يتم تطبيق الستايل على جميعها قم بوضع :
.fa, .fa a{
color: #000000; font-size:15px;
}
و التأثير هكذا :
.fa:hover, .fa a:hover{
color: #858585;
}
.fa .fa-star{
color: #858585; font-size:15px;
}
في حالة أردت استدعاء الأيقونة عن طريق الـ Unicode الخاص بها :
#id .class:before { content: "\f005"; }
و الأن لنفترض أنك تريد جعل الأيقونة تدور، ما عليك سوى استعمال كود الHTML و إضافة fa-spin إلى الأيقونة كالتالي :
<a href="www.najmacode.com" target="_blank"><i class="fa fa-star fa-spin"></i></a>
2- بالنسبة للووردبريس :
بالنسبة للووردبريس فهو نوعا ما معقد، لكن فقط مع بعض التركيز ستتم الطريقة بنجاح، ماعليك هو إضافة السكربت التالي :
function msk_load_css_fontawesome() { if (!is_admin()) { wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', null, '4.0.1' ); } } add_action('wp_enqueue_scripts', 'msk_load_css_fontawesome');
و يمكنك إضافة الكود الخاص بالأيقونة التي تريدها في هيكل الموقع (HTML)، لكن سوف نتطرق الى طريقة اخرى تمكنك أيضاً من إدراج أي أيقونة تريدها في الموقع :
function msk_fontawesome_shortcode($param) { extract( shortcode_atts( array( 'icon' => 'star' ), $param ) ); return '<i class="fa ' . $icon . '"></i>'; } add_shortcode('fa-icon', 'msk_fontawesome_shortcode');
و أما بالنسبة للستايل فلاداعي لشرحه لانه يشبه تقريباً البلوجر و السكربتات الاخرى، ماعليك سوى اخد الستايل و وضعه في الملف الخاص به.
لماذا مكتبة الـFont Awesome :
أولا و كما شرحنا سابقاً أنها تمكنك من عدم تغيير جودة الأيقونة سواء عند عرض الموقع على الحاسوب أو على الهواتف، و ثانيا تساعدك على ربح وقتك عوض التعديل على لون و حجم الأيقونات بالفوتوشوب، فببعض أكواد الـCSS تقوم بتغيير الحجم و اللون و إضافة تأثيرات اخرى، حقيقة هذه المكتبة يجب أن تكون في محفظة كل مصمم، مطور، مبرمج ويب. أتركك تكتشف من هنا
أتمنى أن الموضوع قد نال إعجابك، رجاءاً لاتنسى مشاركته مع أصدقائك، و لاتنسى كذالك لايك لصفحتنا على الفيسبوك، و لاتبخل علينا بتعليقاتك، أراك في موضوع اخر.
ليست هناك تعليقات:
إرسال تعليق