استعمل مكتبة 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) إلى مدونتنا الجديدة (تقني ويب) قصد الإحتفاض بالمعلومة، ولسهولة ولوج الزائر لها من مصدر واحد...، نرجوا أن يكون الموضوع مازال مفيدا...

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