دَلِيلُ Font Awesome 5 الشَّامِلُ: التَّسْجِيلُ وَاسْتِخْدَامُ الأَيْقُونَاتِ فِي مَوَاقِعِ الوِيبِ
تُعْتَبَرُ مَكْتَبَةُ Font Awesome 5 وَاحِدَةً مِنْ أَشْهَرِ مَكْتَبَاتِ الأَيْقُونَاتِ الَّتِي يَعْتَمِدُ عَلَيْهَا المُطَوِّرُونَ وَالمُصَمِّمُونَ فِي بِنَاءٍ وَتَنْسِيقِ وَاجِهَاتِ مَوَاقِعِ الوِيبِ، حَيْثُ تُوَفِّرُ المَكْتَبَةُ آلَافَ الأَيْقُونَاتِ القَابِلَةِ لِلتَّخْصِيصِ وَالتَّعْدِيلِ بِسُهُولَةٍ بَالِغَةٍ. فِي هَذَا الدَّلِيلِ عَمِيقِ المَحْتَوَى، سَنَتَعَرَّفُ عَلَى كَيْفِيَّةِ التَّسْجِيلِ فِي المَوْقِعِ الرَّسْمِيِّ، طَرِيقَةِ رَبْطِ المَكْتَبَةِ بِمَشْرُوعِكَ، ثُمَّ شَرْحِ جَمِيعِ الخَصَائِصِ المُتَاحَةِ مِثْلَ تَكْبِيرِ الأَيْقُونَاتِ، عَمَلِ القَوَائِمِ، إِضَافَةِ الإِطَارَاتِ وَالسَّحْبِ، التَّحْرِيكِ، التَّدْوِيرِ، التَّكْدِيسِ، وَضَبْطِ العَرْضِ مَعَ دَعْمِ مَعَايِيرِ تَوَافُقِ الوُصُولِ العَالَمِيَّةِ.
---كَيْفِيَّةُ التَّسْجِيلِ فِي مَوْقِعِ Font Awesome وَالحُصُولِ عَلَى الكُودِ
لِكَيْ تَبْدَأَ بِاسْتِخْدَامِ الإِصْدَارِ الخَامِسِ، يَتَطَلَّبُ الأَمْرُ إِنْشَاءَ حِسَابٍ شَخْصِيٍّ لِلْحُصُولِ عَلَى شِيفْرَةٍ خَاصَّةٍ بِكَ تُسَمَّى Kit. يُمْكِنُكَ تَلْخِيصُ خُطُوَاتِ التَّسْجِيلِ فِيمَا يَلِي:
- اُدْخُلْ إِلَى المَوْقِعِ الرَّسْمِيِّ عَبْرَ الرَّابِطِ: fontawesome.com.
- اِضْغَطْ عَلَى زِرِّ Sign Up (إِنْشَاءُ حِسَابٍ جَدِيدٍ).
- يُمْكِنُكَ التَّسْجِيلُ بِسُهُولَةٍ عَبْرَ بَرِيدِكَ الإِلِكْتْرُونِيِّ أَوْ رَبْطِ الحِسَابِ بِـ Google أَوْ GitHub.
- بَعْدَ تَأْكِيدِ الحِسَابِ، اِنْتَقِلْ إِلَى لَوْحَةِ التَّحَكُّمِ وَقُمْ بِإِنْشَاءٍ Kit جَدِيدٍ.
-
اِنْسَخْ كُودَ الـ JavaScript الَّذِي يُوَفِّرُهُ لَكَ المَوْقِعُ، ثُمَّ
ضَعْهُ دَاخِلَ وَسْمِ
<head>فِي مَلَفِّ الـ HTML الخَاصِّ بِكَ.
بَعْدَ إِتْمَامِ هَذِهِ الخُطُوَاتِ بِنَجَاحٍ، سَتَكُونُ مَكْتَبَةُ الأَيْقُونَاتِ نَشِطَةً فِي مَوْقِعِكَ وَجَاهِزَةً لِلِاسْتِخْدَامِ الفَوْرِيِّ.
---الفِئَاتُ الأَسَاسِيَّةُ لِأَيْقُونَاتِ الإِصْدَارِ الخَامِسِ
مِنْ أَبْرَزِ التَّغْيِيرَاتِ فِي Font Awesome 5 هِيَ تَقْسِيمُ الأَيْقُونَاتِ إِلَى فِئَاتٍ مُحَدَّدَةٍ (Prefixes)، وَيَجِبُ كِتَابَةُ الفِئَةِ الصَّحِيحَةِ لِتَمْكِينِ الأَيْقُونَةِ مِنْ الظُّهُورِ:
| الفِئَةُ (Class) | نَوْعُ الأَيْقُونَاتِ (Style) | وَصْفٌ مِعْمَارِيٌّ |
|---|---|---|
fas |
Solid | أَيْقُونَاتٌ مُمْتَلِئَةٌ وَذَاتُ خَطٍّ عَرِيضٍ (مَجَّانِيَّةٌ). |
far |
Regular | أَيْقُونَاتٌ خَفِيفَةٌ وَمُفَرَّغَةٌ مِنَ الدَّاخِلِ (مَجَّانِيَّةٌ جُزْئِيًّا). |
fab |
Brands | خَاصَّةٌ بِالشَّعَارَاتِ العَالَمِيَّةِ مِثْلَ: Facebook، Twitter، YouTube. |
fal |
Light | أَيْقُونَاتٌ رَفِيعَةٌ جِدًّا وَأَنِيقَةٌ (مُتَاحَةٌ فَقَطْ فِي النُّسْخَةِ المَدْفُوعَةِ). |
التَّحَكُّمُ فِي حَجْمِ الأَيْقُونَاتِ (Larger Icons)
لِتَكْبِيرِ الأَيْقُونَاتِ بِشَكْلٍ تِلْقَائِيٍّ دُونَ كِتَابَةِ شِيفْرَةِ CSS مُخَصَّصَةٍ، تُتِيحُ لَكَ المَكْتَبَةُ سِلْسِلَةً مِنَ الفِئَاتِ الجَاهِزَةِ الَّتِي تَعْتَمِدُ عَلَى التَّكْبِيرِ النِّسْبِيِّ:
/* الخِيَارَاتُ المُتَاحَةُ لِلتَّكْبِيرِ */ fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x
مِثَالٌ تَطْبِيقِيٌّ لِتَكْبِيرِ أَيْقُونَةِ الكَامِيرَا ثَلَاثَ مَرَّاتٍ:
<i class="fas fa-camera fa-3x"></i>---
أَيْقُونَاتُ القَوَائِمِ (List Icons)
إِذَا كُنْتَ تُرِيدُ اسْتِبْدَالَ نِقَاطِ القَوَائِمِ التَّقْلِيدِيَّةِ
بِأَيْقُونَاتٍ جَذَّابَةٍ، يُمْكِنُكَ اسْتِخْدَامُ الفِئَةِ الأُمِّ
fa-ul عَلَى وَسْمِ القَائِمَةِ، ثُمَّ تَغْلِيفُ الأَيْقُونَةِ
دَاخِلَ وَسْمِ <span> يَحْمِلُ الفِئَةَ fa-li:
<ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>مِيزَةٌ أُولَى مُكْتَمِلَةٌ</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>مِيزَةٌ ثَانِيَةٌ مُكْتَمِلَةٌ</li> </ul>---
الأَيْقُونَاتُ ذَاتُ الإِطَارِ وَالسَّحْبِ (Bordered & Pulled Icons)
تُسْتَخْدَمُ هَذِهِ الخَصَائِصُ لِتَحْسِينِ تَمْوِيعِ الأَيْقُونَةِ دَاخِلَ
النُّصُوصِ؛ حَيْثُ تَقُومُ fa-border بِإِضَافَةِ حُدُودٍ
رَقِيقَةٍ حَوْلَ الرَّمْزِ، بَيْنَمَا تَقُومُ فِئَاتُ السَّحْبِ بِتَوْجِيهِ
الأَيْقُونَةِ يَمِينًا أَوْ يَسَارًا مَعَ السَّمَاحِ لِلنَّصِّ بِالِالْتِفَافِ
حَوْلَهَا سَلِسًا:
<i class="fas fa-quote-left fa-border"></i> <i class="fas fa-arrow-right fa-pull-right"></i> <i class="fas fa-arrow-left fa-pull-left"></i>---
الأَيْقُونَاتُ المُتَحَرِّكَةُ (Animated Icons)
لِإِضْفَاءِ طَابَعٍ دِينَامِيكِيٍّ مِثْلَ مُؤَشِّرَاتِ التَّحْمِيلِ (Loading
CSS)، تُقَدِّمُ المَكْتَبَةُ فِئَاتٍ جَاهِزَةً لِلثَّوَرَانِ؛ حَيْثُ
تَمْنَحُكَ fa-spin دَوَرَانًا نَاعِمًا وَمُسْتَمِرًّا، بَيْنَمَا
تَمْنَحُكَ fa-pulse دَوَرَانًا عَلَى 8 خُطُوَاتٍ مُحَدَّدَةٍ:
<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i>---
التَّدْوِيرُ وَالعَكْسُ (Rotated & Flipped)
إِذَا كُنْتَ تُرِيدُ اسْتِخْدَامَ أَيْقُونَةٍ نَفْسِهَا لَكِنْ بِاتِّجَاهٍ زَاوِيٍّ مُخْتَلِفٍ، يُمْكِنُكَ الِاعْتِمَادُ عَلَى فِئَاتِ التَّدْوِيرِ بِزَوَايَا هَنْدَسِيَّةٍ مُحَدَّدَةٍ، أَوْ فِئَاتِ العَكْسِ الأُفُقِيِّ وَالعَمُودِيِّ:
/* فِئَاتُ التَّدْوِيرِ وَالعَكْسِ الجَاهِزَةِ */ fa-rotate-90, fa-rotate-180, fa-rotate-270 fa-flip-horizontal, fa-flip-vertical /* مِثَالٌ عَمَلِيٌّ عَلَى سَهْمٍ مُدَوَّرٍ وَمَعْكُوسٍ */ <i class="fas fa-arrow-up fa-rotate-90"></i> <i class="fas fa-arrow-up fa-flip-horizontal"></i>---
تكْدِيسُ الأَيْقُونَاتِ (Stacked Icons)
يُتِيحُ لَكَ التَّكْدِيسُ دَمْجَ أَيْقُونَتَيْنِ لِإِنْشَاءِ رَمْزٍ جَدِيدٍ
كُلِّيًّا، مِثْلَ وَضْعِ شَعَارٍ دَاخِلَ خَلْفِيَّةٍ دَائِرِيَّةٍ مُصْمَتَةٍ.
يَتِمُّ ذَلِكَ بِتَغْلِيفِهِمَا دَاخِلَ حَاوِيَةٍ تَحْمِلُ الفِئَةَ
fa-stack:
<span class="fa-stack"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i> </span>---
تَثْبِيتُ العَرْضِ (Fixed Width Icons)
تَخْتَلِفُ الأَيْقُونَاتُ فِي عَرْضِهَا الهَنْدَسِيِّ الطَّبِيعِيِّ؛ فَعَلَى
سَبِيلِ المِثَالِ، أَيْقُونَةُ المَنْزِلِ أَعْرَضُ مِنْ أَيْقُونَةِ عَلَامَةِ
التَّعَجُّبِ. عِنْدَ وَضْعِهِمَا فِي قَائِمَةٍ عَمُودِيَّةٍ، قَدْ تَبْدُو
النُّصُوصُ غَيْرَ مُحَاذَاةٍ بَدِقَّةٍ. لِحَلِّ هَذِهِ المُشْكِلَةِ،
نَسْتَخْدِمُ الفِئَةَ fa-fw لِتَوْحِيدِ العَرْضِ المِسَاحِيِّ
لِجَمِيعِ الأَيْقُونَاتِ:
<i class="fas fa-home fa-fw"></i> الصَّفْحَةُ الرَّئِيسِيَّةُ <i class="fas fa-info fa-fw"></i> حَوْلَ المَوْقِعِ---
تَوَافُقُ الوُصُولِ لِذَوِي الِاحْتِيَاجَاتِ الخَاصَّةِ (Accessibility)
مِنْ أَجْلِ بِنَاءِ مَوْقِعٍ يَلْتَزِمُ بِمَعَايِيرِ الوِيبِ العَالَمِيَّةِ، يَجِبُ تَهْيِئَةُ الأَيْقُونَاتِ لِتَتَنَاسَبَ مَعَ قَارِئَاتِ الشَّاشَةِ (Screen Readers):
-
aria-hidden="true": تُسْتَخْدَمُ لِإِخْفَاءِ الأَيْقُونَةِ عَنْ قَارِئِ الشَّاشَةِ إِذَا كَانَ غَرَضُهَا جَمَالِيًّا وَزَخْرُفِيًّا فَقَطْ. -
<span class="sr-only">: تُسْتَخْدَمُ لِإِضَافَةِ نَصٍّ بَدِيلٍ يَقْرَؤُهُ الجِهَازُ لِفَاقِدِي البَصَرِ دُونَ أَنْ يَظْهَرَ النَّصُّ بَصَرِيًّا فِي الصَّفْحَةِ.
<i class="fas fa-home" aria-hidden="true"></i> <span class="sr-only">الصَّفْحَةُ الرَّئِيسِيَّةُ</span>---
خَاتِمَةٌ
فِي نِهَايَةِ المَطَافِ، نَكُونُ قَدْ غَطَّيْنَا مَكْتَبَةُ Font Awesome 5 بِشَكْلٍ اِحْتِرَافِيٍّ وَمُتَكَامِلٍ؛ بَدْءًا مِنْ إِنْشَاءِ الحِسَابِ وَتَفْعِيلِ الـ Kit، مُرُورًا بِالفِئَاتِ الزَّاوِيَّةِ وَالتَّكْدِيسِ وَالحَرَكَةِ، وُصُولًا إِلَى تَطْبِيقِ مَعَايِيرِ الوُصُولِ الآمِنَةِ. يُمْكِنُكَ الآنَ نَسْخُ هَذِهِ الأَمْثِلَةِ وَدَمْجُهَا فِي مَشَارِيعِكَ لِتَرْقِيَةِ وَاجِهَاتِ مَوْقِعِكَ إِلَى أَعْلَى مُسْتَوَيَاتِ الِاحْتِرَافِيَّةِ.