1
00:00:02,790 --> 00:00:06,440
Bây giờ chúng ta hãy chuyển sang bài tập tiếp theo của chúng tôi,

2
00:00:06,440 --> 00:00:09,225
nơi chúng ta sẽ tìm hiểu thêm về phông chữ Icon.

3
00:00:09,225 --> 00:00:11,435
Chúng tôi sẽ tải về Font Awesome,

4
00:00:11,435 --> 00:00:16,195
và sau đó bao gồm nó trong thiết kế trang web của chúng tôi.

5
00:00:16,195 --> 00:00:20,800
Và chúng tôi cũng sẽ tải về bootstrap xã hội và

6
00:00:20,800 --> 00:00:27,360
thiết kế một số bằng sáng chế xã hội để được đưa vào sân.

7
00:00:27,360 --> 00:00:35,450
Để bắt đầu, hãy vào thư mục nhầm lẫn trong cửa sổ thiết bị đầu cuối của bạn,

8
00:00:35,450 --> 00:00:40,310
và chúng tôi sẽ sử dụng npm để đi và lấy Font Awesome cho chúng tôi.

9
00:00:40,310 --> 00:00:49,475
Vì vậy, tại dấu nhắc, gõ npm cài đặt font-awesome trừ đi lưu.

10
00:00:49,475 --> 00:00:53,930
Vì vậy, điều này sẽ lấy Font Awesome vào thư mục không ai của chúng tôi.

11
00:00:53,930 --> 00:01:00,825
Và đồng thời, nó sẽ thêm Font Awesome vào tập tin package.json của chúng tôi như là một phụ thuộc.

12
00:01:00,825 --> 00:01:02,910
Khi Font Awesome được lấy,

13
00:01:02,910 --> 00:01:08,215
sau đó chúng ta có thể đi trước để làm cho sử dụng nó trong trang web của chúng tôi.

14
00:01:08,215 --> 00:01:16,100
Bước tiếp theo là lấy bootstrap xã hội và cài đặt nó vào dự án của chúng tôi.

15
00:01:16,100 --> 00:01:18,980
Vì vậy, để làm điều đó, tại dấu nhắc loại npm

16
00:01:18,980 --> 00:01:27,090
cài đặt bootstrap-social @5 .1.1

17
00:01:29,130 --> 00:01:31,645
trừ đi lưu.

18
00:01:31,645 --> 00:01:37,630
Và điều này sẽ lấy bootstrap xã hội và cài đặt nó vào dự án của chúng tôi.

19
00:01:37,630 --> 00:01:41,460
Bây giờ, chúng ta cần phải sử dụng phông chữ này năm,

20
00:01:41,460 --> 00:01:45,760
đó là phông chữ tuyệt vời, và bootstrap xã hội trong trang web của chúng tôi.

21
00:01:45,760 --> 00:01:51,485
Vì vậy, đi đến index.html ngay ở đầu trang,

22
00:01:51,485 --> 00:01:54,605
ngay trước khi tập tin style.css,

23
00:01:54,605 --> 00:02:00,125
tôi sẽ nhập khẩu cả Font Awesome và bootstrap xã hội.

24
00:02:00,125 --> 00:02:04,325
Vì vậy, ngay tại đó, chúng ta hãy gõ liên kết

25
00:02:04,325 --> 00:02:12,440
rel stylesheet href

26
00:02:12,900 --> 00:02:22,830
node_modules/font-awesome/css/font-awesome.main.css Vì vậy, chúng ta hãy

27
00:02:35,820 --> 00:02:45,080
nhập vào tập tin index.html của chúng tôi tương tự,

28
00:02:46,050 --> 00:02:57,380
cho nhập khẩu bootstrap xã hội.

29
00:03:00,460 --> 00:03:07,760
Vì vậy, node_modules/bootstrap-social/bootsrap-social.css.

30
00:03:07,760 --> 00:03:13,995
Vì vậy, hai chúng tôi sẽ bao gồm vào index.html của chúng tôi.

31
00:03:13,995 --> 00:03:21,960
Tương tự như vậy, tôi cần phải bao gồm cả hai này vào aboutus.html của tôi Vì vậy, hãy

32
00:03:21,960 --> 00:03:29,995
để tôi sao chép điều đó và di chuyển qua aboutus.html và sau đó dán đó vào aboutus.html cũng.

33
00:03:29,995 --> 00:03:37,180
Bây giờ, trở lại index.html chúng tôi sẽ không sử dụng các biểu tượng Font Awesome,

34
00:03:37,180 --> 00:03:43,060
và cũng là biểu tượng xã hội bootstrap trong trang index.html của chúng tôi.

35
00:03:43,060 --> 00:03:48,485
Đi đến thanh điều hướng đó trong trang index.html,

36
00:03:48,485 --> 00:03:53,770
ngay trong liên kết này cho trang chủ của họ,

37
00:03:53,770 --> 00:03:59,840
Tôi sẽ đi vào và thêm rằng phông chữ tuyệt vời mã.

38
00:03:59,840 --> 00:04:06,430
Vì vậy, tôi sẽ nói nhịp lớp fa fa-nhà.

39
00:04:06,430 --> 00:04:10,615
Vì vậy, fa nói rằng tôi đang áp dụng các lớp Font Awesome,

40
00:04:10,615 --> 00:04:14,550
fa nhà là biểu tượng cụ thể cho biểu tượng nhà.

41
00:04:14,550 --> 00:04:18,215
Vì vậy, đó là những gì tôi muốn sử dụng trên trang chủ của tôi.

42
00:04:18,215 --> 00:04:26,190
Và sau đó đóng thẻ săng- và sau đó sau khi không gian, nút home.

43
00:04:26,190 --> 00:04:30,265
Vì vậy, điều đó sẽ bao gồm các biểu tượng nhà trong đó.

44
00:04:30,265 --> 00:04:36,945
Tôi sẽ sao chép này và sau đó cho về,

45
00:04:36,945 --> 00:04:42,895
Tôi sẽ sử dụng cùng một điều nhưng thay vì fa-home, vì

46
00:04:42,895 --> 00:04:46,610
vậy thông báo cho một không gian giữa thẻ khoảng đóng và

47
00:04:46,610 --> 00:04:51,100
về và thay vì fa-home tôi sẽ nói fa-info.

48
00:04:51,100 --> 00:04:55,280
Bây giờ chúng, tôi đã tìm ra rằng đây là những biểu tượng mà tôi muốn sử dụng.

49
00:04:55,280 --> 00:05:00,110
Bạn có thể kiểm tra tài liệu Font Awesome để tìm

50
00:05:00,110 --> 00:05:04,820
hiểu những biểu tượng cụ thể và cách bạn bao gồm chúng.

51
00:05:04,820 --> 00:05:09,610
Đối với menu tôi sẽ sử dụng một biểu tượng danh sách ở đó.

52
00:05:09,610 --> 00:05:15,840
Tôi gọi biểu tượng đó là danh sách fa-list.

53
00:05:15,840 --> 00:05:20,400
Bây giờ, tôi cũng sẽ sử dụng các biểu tượng có kích thước lớn hơn.

54
00:05:20,400 --> 00:05:23,160
Vì vậy, tôi cũng sẽ bao gồm fa-lg

55
00:05:23,160 --> 00:05:32,890
vào các lớp biểu tượng fa-lg.

56
00:05:32,890 --> 00:05:39,345
Bây giờ để liên lạc tôi sẽ sử dụng fa-home,

57
00:05:39,345 --> 00:05:49,095
và sau đó nếu đây là fa-địa chỉ thẻ fa-lg và lưu những thay đổi.

58
00:05:49,095 --> 00:05:51,465
Bạn nên lặp lại cùng,

59
00:05:51,465 --> 00:05:56,220
bổ sung các biểu tượng tương tự ngay cả trong trang aboutus.html,

60
00:05:56,220 --> 00:06:01,880
và sau đó chúng tôi sẽ xem trang web của chúng tôi sau khi chúng tôi hoàn thành các thay đổi.

61
00:06:01,880 --> 00:06:09,350
Sau khi sửa đổi cũng aboutus.html và index.html bao gồm các biểu tượng,

62
00:06:09,350 --> 00:06:14,675
Tôi đã lưu các thay đổi và sau đó ở đây tôi đang ở trang web của tôi và lưu ý

63
00:06:14,675 --> 00:06:21,150
làm thế nào các biểu tượng này đã được đưa vào thanh điều hướng của tôi.

64
00:06:21,150 --> 00:06:24,890
Vì vậy, bạn có thể thấy rằng có một biểu tượng nhà ở phía trước của nhà,

65
00:06:24,890 --> 00:06:27,885
có một biểu tượng thông tin ở phía trước của khoảng,

66
00:06:27,885 --> 00:06:32,525
một biểu tượng danh sách ở phía trước của menu và một biểu tượng thẻ địa chỉ ở phía trước của liên lạc.

67
00:06:32,525 --> 00:06:39,195
Vì vậy, đây là một cách tốt đẹp để thêm một số yếu tố trực quan vào trang web của bạn.

68
00:06:39,195 --> 00:06:40,800
Bây giờ, điều này thật tuyệt vời.

69
00:06:40,800 --> 00:06:47,590
Bây giờ những gì tôi muốn làm là làm việc để cập nhật các cảnh quay.

70
00:06:47,590 --> 00:06:53,250
Bây giờ, tôi muốn thay thế fax điện thoại và email bằng các biểu tượng và

71
00:06:53,250 --> 00:06:59,370
cũng biến tất cả những thứ này thành các nút truyền thông xã hội ở đây.

72
00:06:59,370 --> 00:07:03,810
Vì vậy, để làm điều đó, chúng tôi sẽ làm cho sử dụng Font Awesome cho điều này,

73
00:07:03,810 --> 00:07:08,440
và sau đó chúng tôi sẽ làm cho sử dụng bootstrap xã hội cho điều này.

74
00:07:08,440 --> 00:07:11,720
Đi đến chân trang index.html,

75
00:07:11,720 --> 00:07:19,610
tôi sẽ thay thế điện thoại bằng biểu tượng Font Awesome.

76
00:07:19,610 --> 00:07:22,930
Vì vậy, tôi sẽ nói, “i” như tôi đã đề cập,

77
00:07:22,930 --> 00:07:29,130
bạn có thể sử dụng span hoặc tôi để chỉ định các biểu tượng Font Awesome.

78
00:07:29,130 --> 00:07:34,820
Trang web Font Awesome sử dụng tôi nhưng tôi đang cho bạn thấy hai cách có thể làm những điều này.

79
00:07:34,820 --> 00:07:41,230
Vì vậy, tôi nói fa fa-tel,

80
00:07:41,230 --> 00:07:52,260
Tôi xin lỗi fa-điện thoại và đóng <i> thẻ ở đây.

81
00:07:53,270 --> 00:07:58,985
Và đối với fax, tôi sẽ chỉ cần sao chép nó,

82
00:07:58,985 --> 00:08:07,550
và sau đó cho fax nếu nó là fa-fax,

83
00:08:07,550 --> 00:08:17,705
và cho email nó là fa-envelope và lưu thay đổi.

84
00:08:17,705 --> 00:08:24,485
Bây giờ áp dụng tương tự cho trang aboutus.html.

85
00:08:24,485 --> 00:08:26,210
Đi đến trang web của tôi,

86
00:08:26,210 --> 00:08:29,765
bạn ngay lập tức nhận thấy rằng điện thoại, fax

87
00:08:29,765 --> 00:08:34,420
và email, bây giờ được thay thế bằng các biểu tượng tương ứng.

88
00:08:34,420 --> 00:08:37,735
Bây giờ bước cuối cùng là sử dụng bootstrap social để thay thế

89
00:08:37,735 --> 00:08:41,550
tất cả các liên kết này bằng các nút truyền thông xã hội.

90
00:08:41,550 --> 00:08:43,350
Để thực hiện điều đó,

91
00:08:43,350 --> 00:08:47,835
chúng tôi sẽ đi đến chân trang và sau đó thay thế mỗi trong số

92
00:08:47,835 --> 00:08:53,400
này với các biểu tượng tương ứng của họ ở đó.

93
00:08:53,400 --> 00:08:57,345
Vì vậy, tôi có thể nói, tôi lớp F

94
00:08:57,345 --> 00:09:06,545
ont Awesome fa-google-plus và

95
00:09:06,545 --> 00:09:09,255
đóng <i> thẻ đó.

96
00:09:09,255 --> 00:09:16,170
Và sau đó tôi chỉ đơn giản là sẽ sao chép điều này và sau đó áp dụng tương tự cho những người còn lại.

97
00:09:16,170 --> 00:09:21,660
Vì vậy, tôi sẽ nói, Facebook,

98
00:09:28,330 --> 00:09:38,400
LinkedIn, Twitter,

99
00:09:44,910 --> 00:09:51,860
YouTube, và cuối cùng cho thư tôi sẽ

100
00:09:51,860 --> 00:09:59,865
sử dụng một biểu tượng phong bì ở đó.

101
00:09:59,865 --> 00:10:07,250
Ngoài ra, để biến điều này thành các bằng sáng chế xã hội bootstrap cho các thẻ A,

102
00:10:07,250 --> 00:10:16,150
chúng ta nên áp dụng các lớp học như nút nút xã hội biểu tượng,

103
00:10:16,150 --> 00:10:24,870
và sau đó nút-google làm tương tự với những người còn lại.

104
00:10:24,870 --> 00:10:30,255
Đối với thứ hai nó sẽ là Facebook,

105
00:10:30,255 --> 00:10:38,690
sau đó LinkedIn,

106
00:10:44,970 --> 00:10:52,370
Twitter, Google và sau đó cho người cuối cùng,

107
00:10:52,370 --> 00:11:02,985
vì chúng tôi không có một nút biểu tượng xã hội bootstrap tương ứng cho thư,

108
00:11:02,985 --> 00:11:08,130
chúng tôi sẽ không có bất cứ điều gì ngoại trừ nút biểu tượng xã hội.

109
00:11:08,130 --> 00:11:13,170
Bây giờ với điều này, chúng ta hãy đi và có một cái nhìn nhanh vào chân trang của chúng tôi.

110
00:11:13,170 --> 00:11:16,720
Đi đến chân trang của bạn, bây giờ bạn có thể thấy tất cả các nút

111
00:11:16,720 --> 00:11:20,505
đã được biến thành các nút xã hội tương ứng của họ ở đó.

112
00:11:20,505 --> 00:11:25,720
Chúng ta hãy làm thay đổi tương tự cho chân trang trong aboutus.html.

113
00:11:25,720 --> 00:11:33,125
Vì vậy, tôi chỉ sao chép mã đó ở đó và sau đó đi đến aboutus.html,

114
00:11:33,125 --> 00:11:41,675
và sau đó chỉ đơn giản là thay thế trong chân trang của aboutus.html.

115
00:11:41,675 --> 00:11:46,415
Với điều đó, chúng ta hãy xem một cái nhìn cuối cùng tại trang web của chúng tôi.

116
00:11:46,415 --> 00:11:48,050
Đi đến trang web của chúng tôi,

117
00:11:48,050 --> 00:11:49,635
bạn có thể thấy rằng bây giờ

118
00:11:49,635 --> 00:11:56,030
tất cả các liên kết truyền thông xã hội đã được biến thành các nút truyền thông xã hội ở đó.

119
00:11:56,030 --> 00:11:58,945
Đi đến trang giới thiệu,

120
00:11:58,945 --> 00:12:03,660
bạn sẽ thấy điều tương tự trong trang giới thiệu cũng.

121
00:12:03,660 --> 00:12:07,340
Bây giờ bạn đã hoàn thành bài tập

122
00:12:07,340 --> 00:12:16,560
này, đây có thể là thời điểm tốt để thực hiện một cam kết tốt với thư, phông chữ biểu tượng.