Вместо иконок квадрат

Добрый день скачал и подключил font-awesome вместо иконки квадрат((Иконка должна быть в блоке который описываеться классом button-download)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Простой лендинг</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="font-awesome/css/fontawesome.min.css">
    <link rel="icon" href="images/earth.png">
  </head>
  <body>
    <div id="mainbox">
      <header>
        <div id="background-shadow">
        <div class="wrapper">
          <div id="header-left">
            <h1>Наш заголовок</h1>
            <h2>Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке.</h2>
            <p>При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.</p>
            <a href="#" class="button-download"><i class="fas fa-download"></i>Скачать</a>
          </div>
          <div id="header-right">
            <img src="images/space.png" alt="">

        </div>
        <div class="clear"></div>
      </div>
      </div>
      </header>
    </div>
  </body>
</html>
                               /* CSS */
@import url('https://fonts.googleapis.com/css?family=Roboto');

.clear {
  clear:both;
}
body {
  background-color: #34495e;
  color: #c8c8c8;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 28px; /* отступы между строками */
  margin: 0;
  padding: 0;
}
header{
  background: url(images/river.jpg) 50% 0 no-repeat fixed; /* по центру, нулевой отступ от верхней границы сайта, не повторяться ни в право ни в низ, и зафиксируем чтобы не двигалась*//* картинка, position 2 значения, еще1 , и привязка  */
  background-size: cover; /* Размер фона, и cover  чтобы в независимости от того какой ширины у нас экран картинка была бы у нас во всю ширину*/
}
.wrapper{
  max-width: 1170px;
  margin: 0 auto;
}
header.wrapper{
  padding: 100px 15px 50px 50px;
}
#header-left{
  float:left;
  width: 60%;
}
#header-right{
  float: left;
  width: 40%;
}
#background-shadow{
  background: rgba(0,0,0,0.5);/* темный полупрозрачный фон для лучшего отображения шрифта */
}
h1{
  margin-bottom: 30px;
  font-size: 60px;
  font-weight: 100; /* Насыщенность */
}
#header-left h1{
  font-size: 72px;
  margin-top: 50px;
  line-height: 1.1;
}
#header-left h2{
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 30px;
  line-height: 1.1;
}
#header-left h1 strong{
  font-weight: 400;
}
#header-left h1, #header-left h2, #header-left p{
  margin-right: 40px;
}
#header-left p{
  font-size: 19px;
  margin-bottom: 70px;
  letter-spacing: 1px; /* увеличивает межбуквенный интервал */
}
a.button-download{
  display: block-inline; /* делаем ссылку блочным элементом, но обтекаемым другими */
  color: #fff; /* меняем цвет ссылок по умолчанию */
  border: 1px solid #fff;
  font-weight: 400;
  margin-bottom: 50px;
  padding-right: 20px;
  padding: 10px 16px;
  text-decoration: none; /* отменяем подчеркивание текста ссылки */
}

Основы HTML/CSS - верстка сайтов с нуля(урок 3.2- "пример создания лендинга. Иконки сайта")

Александр

4 years ago

Один ответ