1
00:00:02,790 --> 00:00:06,440
Давайте теперь перейдем к нашему следующему упражнению,

2
00:00:06,440 --> 00:00:09,225
где мы узнаем больше о шрифтах Icon.

3
00:00:09,225 --> 00:00:11,435
Мы скачаем Font Awesome,

4
00:00:11,435 --> 00:00:16,195
а затем включим его в дизайн нашего сайта.

5
00:00:16,195 --> 00:00:20,800
А также мы будем загружать bootstrap social и

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 install font-awesome минус save.

10
00:00:49,475 --> 00:00:53,930
Таким образом, это приведет к Font Awesome в нашу папку никто.

11
00:00:53,930 --> 00:01:00,825
И в то же время он добавит Font Awesome в наш файл package.json в качестве зависимости.

12
00:01:00,825 --> 00:01:02,910
После того, как Font Awesome извлечен,

13
00:01:02,910 --> 00:01:08,215
то мы можем пойти вперед, чтобы использовать его на нашем веб-сайте.

14
00:01:08,215 --> 00:01:16,100
Следующий шаг - получить bootstrap social и установить его в наш проект.

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
И это будет получать social bootstrap и установить его в наш проект.

19
00:01:37,630 --> 00:01:41,460
Теперь нам нужно использовать этот шрифт пять,

20
00:01:41,460 --> 00:01:45,760
это Шрифт Awesome, и бутстрап социальных на нашем сайте.

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
я собираюсь импортировать как Font Awesome, так и bootstrap social.

24
00:02:00,125 --> 00:02:04,325
Итак, прямо там, давайте напечатаем ссылку

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.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, мы не собираемся использовать иконки Font Awesome,

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
я собираюсь войти и добавить этот код Font Awesome.

38
00:03:59,840 --> 00:04:06,430
Так что я скажу, что класс fa fa-home.

39
00:04:06,430 --> 00:04:10,615
Таким образом, fa говорит, что я применяю класс Font Awesome,

40
00:04:10,615 --> 00:04:14,550
fa home - это конкретный значок для значка дома.

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
поэтому обратите внимание, дайте пробел между закрывающим тегом span и

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-list.

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
Теперь для контакта я собираюсь использовать fa-home,

57
00:05:39,345 --> 00:05:49,095
а затем если это факс-адрес карты fa-lg и сохранить изменения.

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
Чтобы сделать это, мы собираемся использовать Font Awesome для этого,

73
00:07:03,810 --> 00:07:08,440
а затем мы собираемся использовать bootstrap social для этого.

74
00:07:08,440 --> 00:07:11,720
Перейдя к нижнему колонтитулу страницы index.html,

75
00:07:11,720 --> 00:07:19,610
я собираюсь заменить телефон значком Font Awesome.

76
00:07:19,610 --> 00:07:22,930
Поэтому я бы сказал, «i», как я уже упоминал,

77
00:07:22,930 --> 00:07:29,130
вы можете либо использовать span, либо я для указания значков Font Awesome.

78
00:07:29,130 --> 00:07:34,820
Font Awesome веб-сайт использует я, но я показываю вам два возможных способа сделать эти вещи.

79
00:07:34,820 --> 00:07:41,230
Так что я говорю fa fa-tel,

80
00:07:41,230 --> 00:07:52,260
прости fa-телефон и закрой <i> бирку здесь.

81
00:07:53,270 --> 00:07:58,985
И для факса, я просто скопирую это,

82
00:07:58,985 --> 00:08:07,550
а затем для факса, если это fa-факс,

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 social, чтобы заменить

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
Font Awesome 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
Так что я скажу, Facebook,

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

99
00:09:44,910 --> 00:09:51,860
YouTube, и, наконец, для почты я собираюсь

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
а затем кнопка google делать то же самое с остальными.

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
последнего, так как у нас нет соответствующей кнопки загрузки социальной иконки для почты,

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
вы увидите то же самое на странице about также.

121
00:12:03,660 --> 00:12:07,340
Теперь, когда вы завершили это упражнение,

122
00:12:07,340 --> 00:12:16,560
это может быть хорошее время, чтобы сделать хорошую фиксацию с сообщением, шрифтами значков.