Давайте теперь перейдем к нашему следующему упражнению,
где мы узнаем больше о шрифтах Icon.
Мы скачаем Font Awesome,
а затем включим его в дизайн нашего сайта.
А также мы будем загружать bootstrap social и
разрабатывать некоторые социальные патенты, которые будут включены в поле.
Чтобы начать работу, перейдите в папку путаницы в окне терминала,
и мы будем использовать npm, чтобы пойти и получить Font Awesome для нас.
Поэтому в подсказке введите npm install font-awesome минус save.
Таким образом, это приведет к Font Awesome в нашу папку никто.
И в то же время он добавит Font Awesome в наш файл package.json в качестве зависимости.
После того, как Font Awesome извлечен,
то мы можем пойти вперед, чтобы использовать его на нашем веб-сайте.
Следующий шаг - получить bootstrap social и установить его в наш проект.
Поэтому для этого в командной строке введите npm
установите bootstrap-social @5 .1.1
минус сохранить.
И это будет получать social bootstrap и установить его в наш проект.
Теперь нам нужно использовать этот шрифт пять,
это Шрифт Awesome, и бутстрап социальных на нашем сайте.
Поэтому, перейдя к index.html прямо вверху,
непосредственно перед файлом style.css,
я собираюсь импортировать как Font Awesome, так и bootstrap social.
Итак, прямо там, давайте напечатаем ссылку
rel stylesheet href
node_modules/font-awesome.main.css Итак, давайте
импортируем это в наш файл index.html аналогичным образом,
учитывая импорт бутстрап социальной.
Итак, node_modules/bootstrap-social/bootsrap-social.css.
Таким образом, эти два мы включим в наш index.html.
Аналогичным образом, мне нужно включить оба этих в мой aboutus.html. Поэтому позвольте мне скопировать это и
перейти к aboutus.html, а затем вставить это в aboutus.html также.
Теперь, возвращаясь к index.html, мы не собираемся использовать иконки Font Awesome,
а также социальные иконки начальной загрузки на нашей странице index.html.
Перейдя на эту панель навигации на странице index.html,
прямо в этой ссылке для их главной страницы,
я собираюсь войти и добавить этот код Font Awesome.
Так что я скажу, что класс fa fa-home.
Таким образом, fa говорит, что я применяю класс Font Awesome,
fa home - это конкретный значок для значка дома.
Таким образом, это то, что я хотел использовать на своей домашней странице.
И затем закройте пробел тег- а затем после пробела, кнопка «Домой».
Так что будет включать в себя домашний значок там.
Я собираюсь скопировать это, а затем для около,
Я собираюсь использовать то же самое, но вместо fa-home,
поэтому обратите внимание, дайте пробел между закрывающим тегом span и
около и вместо fa-home я бы сказал fa-info.
Теперь они, я понял, что это значки, которые я хочу использовать.
Вы можете проверить документацию Font Awesome, чтобы
узнать, какие именно значки и как вы их включаете.
Для меню я буду использовать значок списка там.
Я называю эту иконку как fa-list.
Теперь, также я собираюсь использовать значки большего размера.
Поэтому я также включу fa-lg
в классы значков fa-lg.
Теперь для контакта я собираюсь использовать fa-home,
а затем если это факс-адрес карты fa-lg и сохранить изменения.
Вы должны повторить то же самое,
добавление тех же значков даже на странице aboutus.html,
а затем мы посмотрим на нашу веб-страницу после того, как мы завершим изменения.
После изменения также aboutus.html и index.html, включая значки,
я сохранил изменения, а затем здесь я нахожусь на моей веб-странице и обратите внимание,
как эти значки были включены в мою панель навигации.
Таким образом, вы можете видеть, что есть значок дома перед домом,
есть значок информации перед около,
значок списка перед меню и значок адресной карты перед контактом.
Таким образом, это хороший способ добавления некоторых визуальных элементов на вашу веб-страницу.
Теперь, это замечательно.
Теперь, что я хочу сделать, так это работать над обновлением видео.
Теперь я хочу заменить телефонный факс и электронную почту значками, а
также превратить все это в кнопки социальных сетей здесь.
Чтобы сделать это, мы собираемся использовать Font Awesome для этого,
а затем мы собираемся использовать bootstrap social для этого.
Перейдя к нижнему колонтитулу страницы index.html,
я собираюсь заменить телефон значком Font Awesome.
Поэтому я бы сказал, «i», как я уже упоминал,
вы можете либо использовать span, либо я для указания значков Font Awesome.
Font Awesome веб-сайт использует я, но я показываю вам два возможных способа сделать эти вещи.
Так что я говорю fa fa-tel,
прости fa-телефон и закрой бирку здесь.
И для факса, я просто скопирую это,
а затем для факса, если это fa-факс,
а для электронной почты это fa-конверт и сохранить изменения.
Теперь примените то же самое к странице aboutus.html.
Перейдя на мою веб-страницу,
вы сразу заметите, что телефон,
факс и электронная почта теперь заменены соответствующими значками.
Теперь последним шагом является использование bootstrap social, чтобы заменить
все эти ссылки кнопками социальных сетей.
Чтобы сделать это,
мы перейдем к нижнему колонтитулу, а затем заменим каждый из
них соответствующими значками там.
Поэтому я бы сказал, я класс
Font Awesome fa-google-plus и
закрываю тег там.
И тогда я просто собираюсь скопировать это, а затем применить то же самое к остальным.
Так что я скажу, Facebook,
LinkedIn, Twitter,
YouTube, и, наконец, для почты я собираюсь
использовать значок конверта там.
Кроме того, чтобы превратить это в bootstrap социальные патенты к тегам A,
мы должны применить классы как кнопка кнопки социальной иконки,
а затем кнопка google делать то же самое с остальными.
Для второго это будет Facebook,
затем LinkedIn,
Twitter, Google, а затем для
последнего, так как у нас нет соответствующей кнопки загрузки социальной иконки для почты,
у нас не будет ничего, кроме кнопок социальных значков.
Теперь с этим пойдем и взглянем на наш нижний колонтитул.
Перейдя к нижнему колонтитулу, теперь вы можете увидеть, что все кнопки
были превращены в соответствующие социальные кнопки там.
Давайте сделаем то же самое изменение в нижний колонтитул в aboutus.html.
Поэтому я просто копирую этот код там, а затем перехожу в aboutus.html,
а затем просто заменяю его в нижнем колонтитуле aboutus.html.
С этим давайте рассмотрим один последний взгляд на нашу веб-страницу.
Перейдя на нашу веб-страницу,
вы можете увидеть, что теперь
все ссылки в социальных сетях там были превращены в кнопки социальных сетей.
Перейдя на страницу о,
вы увидите то же самое на странице about также.
Теперь, когда вы завершили это упражнение,
это может быть хорошее время, чтобы сделать хорошую фиксацию с сообщением, шрифтами значков.