1
00:00:02,790 --> 00:00:06,440
دعونا ننتقل الآن إلى التمرين التالي،

2
00:00:06,440 --> 00:00:09,225
حيث سنتعرف على المزيد عن خطوط الأيقونة.

3
00:00:09,225 --> 00:00:11,435
سنقوم بتحميل الخط ممتاز،

4
00:00:11,435 --> 00:00:16,195
ومن ثم تضمينه في تصميم موقعنا على الانترنت.

5
00:00:16,195 --> 00:00:20,800
وأيضا سنقوم تحميل bootstrap الاجتماعية

6
00:00:20,800 --> 00:00:27,360
وتصميم بعض براءات الاختراع الاجتماعية ليتم تضمينها في الملعب.

7
00:00:27,360 --> 00:00:35,450
للبدء، انتقل إلى مجلد الارتباك في نافذة المحطة الطرفية الخاصة بك،

8
00:00:35,450 --> 00:00:40,310
وسوف نستخدم npm للذهاب وجلب Font Awesome بالنسبة لنا.

9
00:00:40,310 --> 00:00:49,475
حتى في موجه، اكتب npm تثبيت الخط رهيبة ناقص حفظ.

10
00:00:49,475 --> 00:00:53,930
لذلك هذا سوف يجلب الخط ممتاز في مجلد لا أحد لدينا.

11
00:00:53,930 --> 00:01:00,825
وفي الوقت نفسه، ستضيف Font Awesome إلى ملف package.json الخاص بنا كتبعية.

12
00:01:00,825 --> 00:01:02,910
مرة واحدة يتم جلب الخط ممتاز،

13
00:01:02,910 --> 00:01:08,215
ثم يمكننا المضي قدما للاستفادة منه في موقعنا على الانترنت.

14
00:01:08,215 --> 00:01:16,100
الخطوة التالية هي جلب bootstrap الاجتماعي وتثبيته في مشروعنا.

15
00:01:16,100 --> 00:01:18,980
لذلك للقيام بذلك، في نوع موجه npm

16
00:01:18,980 --> 00:01:27,090
تثبيت bootstrap-social @5 .1.1

17
00:01:29,130 --> 00:01:31,645
ناقص حفظ.

18
00:01:31,645 --> 00:01:37,630
وهذا سوف يجلب bootstrap الاجتماعية وتثبيته في مشروعنا.

19
00:01:37,630 --> 00:01:41,460
الآن، نحن بحاجة إلى استخدام هذا الخط خمسة،

20
00:01:41,460 --> 00:01:45,760
انها الخط ممتاز، وbootstrap الاجتماعية في موقعنا على الانترنت.

21
00:01:45,760 --> 00:01:51,485
حتى الذهاب إلى index.html الحق في الجزء العلوي،

22
00:01:51,485 --> 00:01:54,605
قبل ملف style.css مباشرة،

23
00:01:54,605 --> 00:02:00,125
وأنا ذاهب لاستيراد كل من الخط رهيبة و بوتستراب الاجتماعية.

24
00:02:00,125 --> 00:02:04,325
حتى هناك حق، دعونا نكتب في

25
00:02:04,325 --> 00:02:12,440
ورقة أنماط ريل رابط href

26
00:02:12,900 --> 00:02:22,830
node_modues/فونت-awesome.main.cs/font-awesome.main.css لذلك دعونا

27
00:02:35,820 --> 00:02:45,080
استيراد ذلك إلى ملف index.html لدينا بالمثل،

28
00:02:46,050 --> 00:02:57,380
نظرا لاستيراد التمهيد الاجتماعي.

29
00:03:00,460 --> 00:03:07,760
حتى node_modules/bootstrap-social/bootsrap-social.css.

30
00:03:07,760 --> 00:03:13,995
لذلك فإن هذين سوف ندرج في index.html لدينا.

31
00:03:13,995 --> 00:03:21,960
وبالمثل، أنا بحاجة إلى تضمين كل من هذه في بلدي aboutus.html لذلك اسمحوا لي أن نسخ ذلك

32
00:03:21,960 --> 00:03:29,995
والانتقال إلى aboutus.html ثم لصق ذلك في aboutus.html أيضا.

33
00:03:29,995 --> 00:03:37,180
الآن، والعودة إلى index.html ونحن لن الاستفادة من الرموز الخط رهيبة،

34
00:03:37,180 --> 00:03:43,060
وأيضا الرموز الاجتماعية بوتستراب في صفحة index.html لدينا.

35
00:03:43,060 --> 00:03:48,485
الذهاب إلى شريط التنقل هذا في صفحة index.html،

36
00:03:48,485 --> 00:03:53,770
والحق في هذا الرابط لصفحتهم الرئيسية،

37
00:03:53,770 --> 00:03:59,840
وأنا ذاهب للذهاب في وإضافة هذا الخط رمز رهيبة.

38
00:03:59,840 --> 00:04:06,430
لذلك سأقول تمتد فئة اتحاد كرة القدم فا المنزل.

39
00:04:06,430 --> 00:04:10,615
لذلك يقول اتحاد كرة القدم أنني أطبق الطبقة الخط ممتاز,

40
00:04:10,615 --> 00:04:14,550
اتحاد كرة القدم المنزل هو رمز محدد لرمز المنزل.

41
00:04:14,550 --> 00:04:18,215
وهكذا هذا هو ما أردت استخدامه على صفحتي الرئيسية.

42
00:04:18,215 --> 00:04:26,190
ثم أغلق علامة الامتداد- ثم بعد المساحة، زر الصفحة الرئيسية.

43
00:04:26,190 --> 00:04:30,265
بحيث سوف تشمل رمز المنزل في هناك.

44
00:04:30,265 --> 00:04:36,945
أنا ذاهب لنسخ هذا ومن ثم عن،

45
00:04:36,945 --> 00:04:42,895
وأنا ذاهب إلى استخدام نفس الشيء ولكن بدلا من fa-home،

46
00:04:42,895 --> 00:04:46,610
لذلك لاحظ إعطاء مسافة بين علامة امتداد الإغلاق

47
00:04:46,610 --> 00:04:51,100
وحول وبدلا من fa-home أود أن أقول fa-info.

48
00:04:51,100 --> 00:04:55,280
الآن هذه، لقد اكتشفت أن هذه هي الرموز التي أريد استخدامها.

49
00:04:55,280 --> 00:05:00,110
يمكنك التحقق من وثائق Font Awesome

50
00:05:00,110 --> 00:05:04,820
لمعرفة أي رموز معينة وكيفية تضمينها.

51
00:05:04,820 --> 00:05:09,610
للقائمة سأستخدم رمز قائمة هناك.

52
00:05:09,610 --> 00:05:15,840
أسمي هذا الرمز كقائمة fa.

53
00:05:15,840 --> 00:05:20,400
الآن، أيضا أنا ذاهب إلى استخدام الرموز أكبر حجما.

54
00:05:20,400 --> 00:05:23,160
لذلك سوف أقوم أيضًا بتضمين fa-lg

55
00:05:23,160 --> 00:05:32,890
في فئات الأيقونات fa-lg.

56
00:05:32,890 --> 00:05:39,345
الآن للاتصال أنا ذاهب إلى استخدام فا المنزل،

57
00:05:39,345 --> 00:05:49,095
وبعد ذلك إذا كان هذا هو فا عنوان بطاقة فا-إل جي وحفظ التغييرات.

58
00:05:49,095 --> 00:05:51,465
يجب تكرار نفسه،

59
00:05:51,465 --> 00:05:56,220
إضافة نفس الرموز حتى في صفحة aboutus.html،

60
00:05:56,220 --> 00:06:01,880
وبعد ذلك سنلقي نظرة على صفحة الويب الخاصة بنا بعد إكمال التغييرات.

61
00:06:01,880 --> 00:06:09,350
بعد تعديل أيضا aboutus.html و index.html بما في ذلك الرموز،

62
00:06:09,350 --> 00:06:14,675
لقد قمت بحفظ التغييرات ثم هنا أنا في صفحة الويب الخاصة بي ولاحظ

63
00:06:14,675 --> 00:06:21,150
كيف تم تضمين هذه الرموز في شريط التنقل الخاص بي.

64
00:06:21,150 --> 00:06:24,890
حتى تتمكن من رؤية أن هناك رمز المنزل أمام المنزل،

65
00:06:24,890 --> 00:06:27,885
وهناك رمز معلومات أمام حوالي،

66
00:06:27,885 --> 00:06:32,525
رمز القائمة أمام القائمة ورمز بطاقة العنوان أمام جهة الاتصال.

67
00:06:32,525 --> 00:06:39,195
لذلك هذه طريقة لطيفة لإضافة بعض العناصر المرئية إلى صفحة الويب الخاصة بك.

68
00:06:39,195 --> 00:06:40,800
الآن، هذا رائع

69
00:06:40,800 --> 00:06:47,590
الآن ما أريد القيام به الآن هو العمل على تحديث اللقطات.

70
00:06:47,590 --> 00:06:53,250
الآن، أريد استبدال فاكس الهاتف والبريد الإلكتروني مع الرموز

71
00:06:53,250 --> 00:06:59,370
وأيضا تحويل كل هذه إلى أزرار وسائل الاعلام الاجتماعية هنا.

72
00:06:59,370 --> 00:07:03,810
لذلك للقيام بذلك، ونحن في طريقنا للاستفادة من الخط ممتاز لهذا،

73
00:07:03,810 --> 00:07:08,440
وبعد ذلك نحن في طريقنا للاستفادة من التمهيد الاجتماعي لهذا الغرض.

74
00:07:08,440 --> 00:07:11,720
الذهاب إلى تذييل الصفحة index.html،

75
00:07:11,720 --> 00:07:19,610
وأنا ذاهب لاستبدال الهاتف مع رمز الخط رهيبة.

76
00:07:19,610 --> 00:07:22,930
لذلك أود أن أقول، «i» كما ذكرت،

77
00:07:22,930 --> 00:07:29,130
يمكنك إما استخدام span أو I لتحديد رموز Font Awesome.

78
00:07:29,130 --> 00:07:34,820
يستخدم موقع Font Awesome I ولكن أنا تظهر لك طريقتين محتملتين للقيام بهذه الأشياء.

79
00:07:34,820 --> 00:07:41,230
لذلك أقول فا فا فا الهاتف,

80
00:07:41,230 --> 00:07:52,260
أنا آسف فا الهاتف وإغلاق <i> العلامة هنا.

81
00:07:53,270 --> 00:07:58,985
وبالنسبة للفاكس، سأقوم ببساطة بنسخ هذا،

82
00:07:58,985 --> 00:08:07,550
ثم للفاكس إذا كان fa-fax،

83
00:08:07,550 --> 00:08:17,705
وبالنسبة للبريد الإلكتروني، يكون مغلف fa وحفظ التغييرات.

84
00:08:17,705 --> 00:08:24,485
الآن تطبيق نفسه على صفحة aboutus.html.

85
00:08:24,485 --> 00:08:26,210
الذهاب إلى صفحة الويب الخاصة بي،

86
00:08:26,210 --> 00:08:29,765
لاحظت على الفور أن الهاتف والفاكس

87
00:08:29,765 --> 00:08:34,420
والبريد الإلكتروني، يتم استبدالها الآن بالرموز المقابلة.

88
00:08:34,420 --> 00:08:37,735
الآن الخطوة الأخيرة هي استخدام bootstrap الاجتماعية لاستبدال

89
00:08:37,735 --> 00:08:41,550
كل هذه الروابط مع أزرار وسائل الاعلام الاجتماعية.

90
00:08:41,550 --> 00:08:43,350
لإنجاز ذلك،

91
00:08:43,350 --> 00:08:47,835
سنذهب إلى تذييل الصفحة ثم استبدال كل من

92
00:08:47,835 --> 00:08:53,400
هذه مع الرموز المقابلة لها هناك.

93
00:08:53,400 --> 00:08:57,345
لذلك أود أن أقول، أنا فئة

94
00:08:57,345 --> 00:09:06,545
الخط رهيبة fa-google-plus

95
00:09:06,545 --> 00:09:09,255
وإغلاق <i> العلامة هناك.

96
00:09:09,255 --> 00:09:16,170
ثم أنا ببساطة ذاهب لنسخ هذا ومن ثم تطبيق نفسه على المتبقية منها.

97
00:09:16,170 --> 00:09:21,660
لذلك سأقول، الفيسبوك،

98
00:09:28,330 --> 00:09:38,400
لينكدين، تويتر،

99
00:09:44,910 --> 00:09:51,860
يوتيوب، وأخيرا للبريد أنا ذاهب

100
00:09:51,860 --> 00:09:59,865
لاستخدام رمز المغلف هناك.

101
00:09:59,865 --> 00:10:07,250
وبالإضافة إلى ذلك، لتحويل هذا إلى براءات الاختراع الاجتماعية bootstrap إلى العلامات A،

102
00:10:07,250 --> 00:10:16,150
يجب علينا تطبيق الطبقات كزر زر رمز الاجتماعية،

103
00:10:16,150 --> 00:10:24,870
ومن ثم زر جوجل تفعل الشيء نفسه إلى ما تبقى منها.

104
00:10:24,870 --> 00:10:30,255
بالنسبة للثانية، سيكون Facebook،

105
00:10:30,255 --> 00:10:38,690
ثم LinkedIn

106
00:10:44,970 --> 00:10:52,370
، Twitter، Google ثم لآخر واحد،

107
00:10:52,370 --> 00:11:02,985
نظرًا لأننا لا نملك زر رمز اجتماعي bootstrap للبريد،

108
00:11:02,985 --> 00:11:08,130
فلن يكون لدينا أي شيء باستثناء الرموز الاجتماعية للزر.

109
00:11:08,130 --> 00:11:13,170
الآن مع هذا، دعونا نذهب ونلقي نظرة سريعة على تذييلنا.

110
00:11:13,170 --> 00:11:16,720
الذهاب إلى تذييل الصفحة الخاص بك، يمكنك الآن أن ترى جميع الأزرار

111
00:11:16,720 --> 00:11:20,505
قد تحولت إلى أزرار الاجتماعية المقابلة هناك.

112
00:11:20,505 --> 00:11:25,720
دعونا نفعل نفس التغيير على تذييل الصفحة في aboutus.html.

113
00:11:25,720 --> 00:11:33,125
لذلك أنا مجرد نسخ هذا الرمز هناك ثم الذهاب إلى aboutus.html،

114
00:11:33,125 --> 00:11:41,675
ومن ثم ببساطة استبدال ذلك في تذييل aboutus.html.

115
00:11:41,675 --> 00:11:46,415
مع ذلك دعونا نلقي نظرة أخيرة على صفحة الويب الخاصة بنا.

116
00:11:46,415 --> 00:11:48,050
الذهاب إلى صفحتنا على شبكة الإنترنت،

117
00:11:48,050 --> 00:11:49,635
يمكنك أن ترى أن الآن

118
00:11:49,635 --> 00:11:56,030
جميع وصلات وسائل الاعلام الاجتماعية هناك تحولت إلى أزرار وسائل الاعلام الاجتماعية هناك.

119
00:11:56,030 --> 00:11:58,945
الذهاب إلى الصفحة حول،

120
00:11:58,945 --> 00:12:03,660
سترى نفس الشيء في الصفحة حول أيضا.

121
00:12:03,660 --> 00:12:07,340
الآن بعد الانتهاء من هذا التمرين،

122
00:12:07,340 --> 00:12:16,560
قد يكون هذا هو الوقت المناسب للقيام بالتزام جيد مع الرسالة، رمز الخطوط.