كلمة الفريق

في عصرنا يوجد مئات الآلاف من المدونين والمدونات، البعض يعمل بشغف وحب...، والآخر يعمل بشكل إنتاجي للكسب فقط !، أما نحن .. نحب ونعشق التدوين ونؤمن أننا سنقوم بإضافة كبيرة للمحتوى العربي ولو بشيئ بسيط، نتعلم بشكل مستمر ونشارككم بكل جديد...، نحاول المساعدة، نحب أصدقاءنا، نهتم بإستفساراتهم كما لو كانت ملكنا، فريقنا فريق واحد رغم أنه متكون من شخص واحد :) لكنه يعمل بجنون

استعمل مكتبة Font-Awesome في تصميمك للمواقع



سـنــتــحـدث فـي تــدويــنـة الــيـوم عـن خــطـوط الايــقــونـات، حــيـث ســأشـرح لــكـم طــريــقـة إسـتــعــمـال مـكــتــبـة Font - Awesome، واســتـعــمـالاتــهـا عــلـى الــويـب بـشــكـل عـام ومــدونـات بـلــوجـر بـشــكـل خـاص، طـبــعـا ســنـســتـعــمـل فـي الــشـرح الــخـط الــشـهــيـر Font Awesome وهـو الأكــثــر تـنــوعــاً والأســهــل اسـتـخــدامــاً. تـعــريــف بــالــمـكـتــبــة : هــي مـكـتــبــة ايـقــونــات، هــذه الايـقــونــات عــبــارة عــن font يــتــم تـحــكــم فـيــهــا مــن خــلال css مـعــلـومــات عــن الــمـكــتـبــة
  1. إســتـعــمـال ايـقــونـات ومــجـســمـات صـغــيـره الــشـكــل بــدون الاحــتـيــاج إلــى صــور، تـخـفــيــف حــجــم الـتـصــفــح
  2.  يــتــم اسـتـخـدامــهــا كـبــديــل لـلــصــور فــي بـعـض الاحـيـان
  3.  لا تـحـتـاج إلــى JavaScript، وتـعـمـل فـقـط ب CSS ( الــتــحــكــم )
  4.  الـمــكــتــبــة بــهــا 479 ايــقــونــه
  5.  مــجــانــيــة
  6. يــتـم الــتــحــكـم فـي حــجـم الايــقــونـات ( بــشــكـل مــبــسـط جـدا )
 نبدأ برابط المكتبة Font Awesome فــي حـالــة مــا إذا كــان لـديــك مـوقــع أو مــنـتــدى وتـحــب أن تــرفــع الــمـكــتــبــة فــيــه يـمــكــنــك تحميلها من هنا الآن نــدخـل عـلــى شــرح الإسـتــخــدام، أولا وقــبــل كــل شــيء عـلــيــك بـإضــافــة كــود CSS الــخــاص بــهــذا الــخـط، لـذا سـنــدخـل لـلــوحـة الـتـحــكـم ثـم نـبــحـث بــاسـتـعــمـال اختصار البحث من لوحة المفاتيح ( Ctrl+F ) عن </head>  و نضيف الكود التالي فوقه :
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

الأن يتبقى لنا التطبيق، كل كود لديه اسم خاص للأيقونة مثلاً:

<i class="fa fa-leaf"></i>  fa-leaf
بعض التوضيحات:
  • fa-leaf  هو معرف الأيقونة
  • بالنسبة لــِ fa فهـي اســاسـيـة فـي كـل الأكـواد تـوضـع قـبـل الــمـعــرف الـخــاص بـكــل أيــقـونــة ولــلــمـزيــد مــن الأيــقــونــات، سـتــفــيــدك الــروابــط الــمــوجــودة فـي الأســفـل :
سؤال قد يطرأ على ذهنك: كيف يمكنني تكبير حجم الأيقونات ؟
الــحــل بــســيــط وســهــل جــداً كــل مــا عــلــيــك هــو إضــافــة أحــد الـقـيــم التالية، بـعــد مـعــرف الأيـقـونــة مـفـصــول بـمـسـافــة :
fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x
وهــذا مـثــال بـسـيــط :
fa-leaf fa-lg
fa-leaf fa-1x
fa-leaf fa-2x
fa-leaf fa-4x
fa-leaf fa-4x
fa-leaf fa-5x

<i class="fa fa-leaf fa-lg"></i> fa-leaf fa-lg
<i class="fa fa-leaf fa-1x"></i> fa-leaf fa-1x
<i class="fa fa-leaf fa-2x"></i> fa-leaf fa-2x
<i class="fa fa-leaf fa-3x"></i> fa-leaf fa-3x
<i class="fa fa-leaf fa-4x"></i> fa-leaf fa-4x
<i class="fa fa-leaf fa-5x"></i> fa-leaf fa-5x

إضــافــة خــاصــيــة الـدوران إلـى الأيـقـونـات الـدائريـة فـقـط وذالـك بـإضـافـة الـقـيـمـة fa - spin إلـى الـكـود مـثـال :
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
خـاصـيــة الــتـحـكــم بــلإتـجـاهــات بــسـتـخــدام الــقـيـمــة fa-rotate ، إليك مثال
عادي
إتجاه-90 درجة
أفقي 180 درجة
عمودي على اليمين 270 درجة
أفقي عادي
عمودي عادي
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
سؤال آخر قد يخطر على بالك : كيف أضيف هذه الأيقونات الى القائمة العلوية مثلاً ؟
مثل هذا القالب الذي استعمله، كل ماعليك هو إضافة كود الأيقونة بجانب التسمية :

  • مثال

  • مثال
  • <li><a href='/'> مثال </a></li>
    

    بعد :
  • مثال
  • <li><a href='/'> <i class="fa fa-anchor"></i>  مثال </a></li>
    
    هـذا الـمــثـال تــســتـطــيـع تــطــبـيــقـه فـي أي مــكـان فـي الـقــالـب تـقـريــبـاً
    وصـلـنـا إلـى نـهـايـه الـشـرح لـيـس نـهـايـه الـمـكـتـبـة، ولـلــحــصــول عــلــى امــثــلــه واشــيــاء اخــرى أكــثــر، كــل مــا عــلــيــك زيــاره هــذا الــرابــط ( يـمــكــنــك اخــتــيــار الأيــقــونــة الــتــي تــريــدهــا مــن الــمـجــمــوعــة الـضــخــمــة الــمــوجــود فـي الـوقـع )، عـبـر زيـارة الــمـوقـع الــرسـمـي من هنا، اتمنى يكون الشرح جيد...


    تم تحديث / نقل الموضوع بما فيه من روابط تحميل أو توجيه من المدونة السابقة (INTOARB) إلى مدونتنا الجديدة (تقني ويب) قصد الإحتفاض بالمعلومة، ولسهولة ولوج الزائر لها من مصدر واحد...، نرجوا أن يكون الموضوع مازال مفيدا...

    إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
    سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
    إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!

    هناك تعليق واحد:

    1. بارك الله فيك أخي
      مدونة تقني : https://www.technical-ar.info

      ردحذف

    يمكنك وضع تعليقك هنا

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