السلام عليكم و رحمة الله, إن كنت مصمم مواقع أو مبرمج أو مطور مواقع, فستحتاج إلى أيقونات من أجل توضيفها في الموقع لجعل الموقع إكثر و ضوحا , جماليا و إحترافيا, مكتبة Font Awesome ماهي؟ ماهي مميزاتها ؟ ما أهميتها في المواقع ؟

ماهي مكتبة font awesome ؟ :

مكتبة font awesome هي مكتبة من البوتستراب - bootstrap الغنية عن التعريف في مجال البرمجة و تصميم المواقع و تحتوي هذه المكتبة على أكثر من 600 أيقونة و هي مكتبة أسسة للمستخدمين من أجل أخذ أيقونات تعبيرية و توضيفها في المواقع بسهولة و إحترافية.

ماهي مميزات مكتبة font awesome :

تتميز هذه المكتبة بعدة خصائص التي يجدها المستخدم رائعة و مريحة و من بينها :

تعدد الأيقونات  :

تحتوي هذه المكتبة على أزيد من 600 أيقونة مختلفة في و الأكثر شيوعا و استخداما من طرف المستخدمين في مختلف المجالات التي تصمم فيها المواقع.

سهولة التحكم  في الأيقونات :

تتميز أيقونات في هذه المكتبة بسهولة تغيير ألوانها و تصغير أو تكبير حجمها و التحكم بها على أساس أنها خط و ذلك فقط بالcss من خلال بعض الخصائص.

توافقها مع جميع الأجهزة :

تتميز مكتبة font awesome بتوافقها مع جميع الأجهزة سواء كانت حواسيب مكتبية أو هواتف ذكية و غير و كذلك تتميز بدقتها العالية و وضوحا و و دقة من نوع رتينا retina التي تعتبر الأكثر وضوحا ذلك الشيء الذي يجعل المكتبة أكثر إحترافا.

أخري :

المكتبة مجانية 100 بالمئة بجميع أيقوناتها, يمكنك إستدخدامها داخل وسم <i></i> بإعطائها الكلاس الخاص بالأيقونة.

ما أهميتها في المواقع :

توضف أيقونات في المواقع أو في أقسام المواقع أو في أي مكان من أجل التمييز بين الأقسام على سبيل المثال دون كتابة إسم القسم

و كذلك تعطي جمالية و جعل الموقع أكثر إحترافية و عصريا و توضف كذلك في روابط التواصل الإجتماعي وغير ذلك.

إقرأ المزيد

mouhcine

مرحبا بكم زوار مدونة مجتمع التقنية اليوم عندي لكم هدية و هي عبارة عن قالب بلوجر من تصميمي و تكويدي هو قالب بسيط و جميل و سهل في الحركة يمكنك من عرض مواضيعك بشكل جميل و بدون مشاكل أو أي صعوبة.

بدون أن أطيل عليكم سأعطيكم بعض مميزات القالب :

1- قالب جميل.
2- قالب سريع و مزود بأكواد السيو.
3- مستعملة في هذا القالب خطوط رائعة.
4- صفحات ثابثة و الخطأ مختلفة عن الصفحات العادية.
5- فوتر ب3 أدوات.
6- ألوان رائعة.
7- قالب متجاوب.
8- المزيد...
الأن نأتي إلى التعديلات :
1- لتغيير الروابط قم بالبحث بإستعمال Ctrl+F عن nav-bar ستجد أسفلها <li><a class='homers' href='http://geekstech3.blogspot.com/'>الرئيسية</a></li> يجب عليك عدم حذف هذه لأنها الرئيسية إذهب الأن أسفل الرئيسية و قم بتطبيق التالي

<li><a href='link'>إسم القسم</a></li>

قم بتغيير Link برابط القسم و إسم القسم بإسم القسم.
يمكنك حدف أحد الأقسام بحدف من <li> إلى </li>.
الأن نأتي إلى رابط التحميل و المعاينة :
للمعاينة : هنا.
للتحميل : هنا.

إقرأ المزيد

mouhcine

مرحبا بكم في هذه المقالة الجديدة و التي سنخصصها لإضافة جميلة و بسيطة تمكنك من إضافة زر إشتراك في قناتك على اليوتوب بشكل جميل و إحترافي و بسيط. بدون أن أطيل عليكم إليكم الإضافة :

صورة لمعاينة الإضافة :

1- قم بتسجيل الدخول إلى مدونتك على البلوجر.
2- قم بالتوجه إلى التخطيط :

3- ثم إختر إضافة أداة في أي مكان يضر لك مناسب :

4- قم بإختيار Html/JavaScript :

5- ثم قم بإضافة الكود التالي في محتوى Html/JavaScript :
<style> .flw-yt { width: 100%; margin: auto; } .flw-yt-img-lnk { background: url('http://www.casualhardcoregamer.fr/wp-content/uploads/2015/07/clavier.jpg'); background-size: 115%; background-repeat: no-repeat; padding: 20px; display: block; width: 100%; background-position: -20px -40px; position: relative; overflow:hidden; } .flw-yt-img-lnk img { float: left; border: 5px solid #1291c8; } .flw-yt-link { position: absolute; bottom: 25px; } .flw-yt-link i { height: 100%; font-size: 15px; margin-left: 3px; } .flw-yt-link a:hover { background: rgb(255, 255, 255); color: #e62117; border-color: #E62117; } .flw-yt-link a { padding: 10px; display: block; background: #E62117; font-family: myriad arabic; transition: 0.3s; color: #fff; border-radius: 3px; border: 1px solid #ffffff; } @media screen and ( max-width : 290px){ .flw-yt-img-lnk img { float: none; border: 5px solid #1291c8; margin: 10px auto; display: block; } .flw-yt-img-lnk { background: url('http://www.casualhardcoregamer.fr/wp-content/uploads/2015/07/clavier.jpg'); background-size: 140%; background-repeat: no-repeat; padding: 20px; display: block; background-position: -30px 0px; position: relative; overflow: hidden; height: 100%; } .flw-yt-link { position: relative; bottom: 0px; width: 50%; text-align: center; margin: auto; } } @media screen and ( max-width : 235px){ .flw-yt-img-lnk { background: url('http://www.casualhardcoregamer.fr/wp-content/uploads/2015/07/clavier.jpg'); background-size: 208%; background-repeat: no-repeat; padding: 20px; display: block; background-position: -30px 0px; position: relative; overflow: hidden; height: 100%; } } </style> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"></link> <div class="flw-yt"> <div class="flw-yt-img-lnk"> <img src="http://bit.ly/29hFsyS" /> <div class="flw-yt-link"> <a href="http://bit.ly/29lesPr"><i class="fa fa-youtube"></i> إشترك الأن</a> </div> </div> </div>
الأن نأتي إلى التغييرات :
1- قم بتغيير هذا الرابط http://bit.ly/29hFsyS برابط صورة قناتك على اليوتوب.
2- قم بتغيير هذا الرابط http://bit.ly/29lesPr برابط قناتك على اليوتوب.

و هذه كانت الإضافة البسيطة أتمنى أن تعجبكم و إذا واجهت أي مشكل فضعه في التعليقات و إلى تدوينة قادمة إنشاء الله.

إقرأ المزيد

mouhcine

أمر جد بسيط أن تضيف أي خط لمدونتك أو لموقعك,  إلا أن الخط له دور مهم في إثارة إنتباه المتلقي أو القارئ فهو يجعل المدونة راقية و في نفس الوقت يوضح الكتابة لقارئ الموضوع الشئ الذي سيجعله يقرأ الموضوع بسهولة و أريحية مما سيجعله يأتي لموقعك مرة أخرى لذالك أحرص على أن يكون خط موقعك جيد و أنيق و إختر شكلا مناسبا لموقعك .

موقع قونت فيس موقع عربي يمنحك ميزت إختيار الخط الذي تراه مناسبا لموقعك يتميز بسهولة الحصول على الخط الذي تريد وبدون أي مقابل منك أو مجهود فعموما أنصحك بزيارة هذا الموقع و أخذ الخط المناسب لموقعك.

فمباشرة بعد الدخول إلى الموقع قم بالضغط على "الخطوط" في الأعلى كما توضح الصورة :

و ستضهر لك الخطوط قم بمعاينة الخطوط المناسبة و عند إختيارك لخط ما ماعليك سوى الضغط على إستعمال :

بعدها ستنبثق لك نافذة صغيرة في الأسفل ماعليك سوي أخد الكود الأول و ضعه إسفل وسم <head> في القالب  الخاص بمدونتك أما الكود الثاني ضعه في المكان الذي تريد أن يضهر فيه الخط أي في الستايل css

رابط الموقع : هنا .

إقرأ المزيد

mouhcine

السلام عليكم و رحمة الله تعالى و بركاته إنشاء الله اليوم هو إفتتاح مدونة مجتمع التقنية و أتمنى أن تكون مدونة مفيدة و مستفيدة إنشاء الله ستتحتوي هذه المدونة على شروحات في المجال التقني و المعلوماتي و كذلك هناك قناة حاصة بالمدونة التي ستطرح فيها شروحات بالفديو و أتمنى أن تشتركو في قناتي من أجل دعمنا و نشر القناة.

أما هذفنا الرئيسي من هذه المدونة و القناة هو نشر المعلومة و نشر الإفادة لن أهتم بربح المال و إنما التدوين هواية لنشر الإفادة و نتمنى أن يكون لدينا زوار و متابعين و الدين يستفدون من هذا الموقع.

هذا هدفنا و أتمنى إن تضع كل من :

- إشتراك بالقناة : هنا .

- الإعجاب بصفحة الفايسبووك : هنا .

إقرأ المزيد

mouhcine