CSS Как добавить икнонку

409

04 ноября 2018, 16:10

Как добавить иконки в блок, сделать чтобы все 4 блока были одинаковыми и не разъезжались, когда в них добавляется текст? Желательно с объяснением, как такое лучше делать вообще, я только учусь. Спасибо.

.wrapper { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
} 
 
.container { 
  width: 1170px; 
  margin: 0 auto; 
} 
 
#header { 
  position: absolute; 
  padding-top: 52px; 
  width: 100%; 
  height: 63px; 
  border-bottom: 1px solid gray; 
} 
 
.logo { 
  float: left; 
} 
 
.logo a { 
  padding: 16px 25px; 
} 
 
.nav { 
  float: right; 
} 
 
.nav li { 
  display: inline-block; 
  float: left; 
  margin-right: 54px; 
} 
 
.nav li:last-child { 
  margin-right: 0 
} 
 
.nav a { 
  text-transform: uppercase; 
  font: bold 13px Montserrat, sans-serif; 
  color: white; 
  text-decoration: none; 
} 
 
.nav a:hover { 
  border-bottom: 4px solid #ff7200; 
  padding-bottom: 28px; 
  top: 38px; 
  color: #ff7200; 
  /* Цвет ссылки при наведении на нее курсора мыши */ 
} 
 
#home { 
  background: #222 url(../img/Background.jpg) no-repeat; 
  -webkit-background-size: 100%; 
  -o-background-size: 100%; 
  -moz-background-size: 100%; 
  background-size: 100%; 
  -webkit-background-size: cover; 
  -o-background-size: cover; 
  -moz-background-size: cover; 
  background-size: cover; 
  height: 968px; 
} 
 
.title h1 { 
  text-transform: uppercase; 
  font: bold 60px Montserrat, sans-serif; 
  text-align: center; 
  padding-top: 445px; 
  margin: 0; 
  color: white; 
} 
 
.title h5 { 
  font: 18px Raleway, sans-serif; 
  text-align: center; 
  color: white; 
} 
 
.button { 
  margin-left: 500px; 
  height: 50px; 
  width: 170px; 
  line-height: 50px; 
  background-color: #ff7200; 
  margin-top: 70px; 
} 
 
.button a { 
  text-transform: uppercase; 
  font: bold 13px Montserrat, sans-serif; 
  color: white; 
  text-decoration: none; 
} 
 
#web { 
  background: #ffffff; 
  height: 1428px; 
  width: 1170px; 
  -webkit-background-size: 100%; 
  -o-background-size: 100%; 
  -moz-background-size: 100%; 
  background-size: 100%; 
  -webkit-background-size: cover; 
  -o-background-size: cover; 
  -moz-background-size: cover; 
  background-size: cover; 
} 
 
div #web .class { 
  margin: 0; 
} 
 
.nav2 { 
  float: right; 
  position: absolute; 
  width: 100%; 
  border-bottom: 1px solid gray; 
  padding-left: 383px; 
} 
 
.nav2 li { 
  display: inline-block; 
  float: left; 
  margin-right: 30px; 
} 
 
.nav2 li:last-child { 
  margin-right: 0 
} 
 
.nav2 a { 
  text-transform: uppercase; 
  font: bold 16px Montserrat, sans-serif; 
  text-decoration: none; 
} 
 
.nav2 ul { 
  margin: 0; 
} 
 
.link { 
  display: inline-block; 
  background: #eeeeee; 
  text-align: center; 
  padding: 125px 78px 0; 
  position: relative; 
  color: #444444; 
  text-decoration: none; 
} 
 
.link:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 54px 133px 0 133px; 
  border-color: #eeeeee transparent transparent transparent; 
  transform: translateX(-50%); 
} 
 
.link:hover { 
  color: #ffffff; 
  background: #ff7200; 
} 
 
.link:hover:after { 
  border-top-color: #ff7200; 
} 
 
.link2 { 
  display: inline-block; 
  background: #eeeeee; 
  text-align: center; 
  padding: 125px 78px 0; 
  position: relative; 
  color: #444444; 
  text-decoration: none; 
} 
 
.link2:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 54px 130px 0 130px; 
  border-color: #eeeeee transparent transparent transparent; 
  transform: translateX(-50%); 
} 
 
.link2:hover { 
  color: #ffffff; 
  background: #ff7200; 
} 
 
.link2:hover:after { 
  border-top-color: #ff7200; 
} 
 
.link3 { 
  display: inline-block; 
  background: #eeeeee; 
  text-align: center; 
  padding: 125px 78px 0; 
  position: relative; 
  color: #444444; 
  text-decoration: none; 
} 
 
.link3:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 54px 152px 0 152px; 
  border-color: #eeeeee transparent transparent transparent; 
  transform: translateX(-50%); 
} 
 
.link3:hover { 
  color: #ffffff; 
  background: #ff7200; 
} 
 
.link3:hover:after { 
  border-top-color: #ff7200; 
} 
 
.link4 { 
  display: inline-block; 
  background: #eeeeee; 
  text-align: center; 
  padding: 125px 78px 0; 
  position: relative; 
  color: #444444; 
  text-decoration: none; 
} 
 
.link4:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  border-style: solid; 
  border-width: 54px 137px 0 137px; 
  border-color: #eeeeee transparent transparent transparent; 
  transform: translateX(-50%); 
} 
 
.link4:hover { 
  color: #ffffff; 
  background: #ff7200; 
} 
 
.link4:hover:after { 
  border-top-color: #ff7200; 
}

<style> 
  @import url('https://fonts.googleapis.com/css?family=Montserrat'); 
  @import url('https://fonts.googleapis.com/css?family=Montserrat:700'); 
  @import url('https://fonts.googleapis.com/css?family=Raleway'); 
</style> 
 
<div class="wrapper"> 
  <div id="header"> 
    <div class="container"> 
      <div class="logo" name="logo"> 
        <a href="#"><img src="img/logo1.png" alt=""></a> 
      </div> 
      <ul class="nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Works</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Blog</a></li> 
      </ul> 
    </div> 
  </div> 
  <div id="home"> 
    <div class="container"> 
      <div class="title" name="title"> 
        <h1>Welcome to our logic</h1> 
        <h5>We Make Awesome Theme For Your Business</h5> 
      </div> 
      <div class="button" name="button"> 
        <center><a href="#">Get Started</a></center> 
 
      </div> 
    </div> 
  </div> 
  <div id="web" class="web"> 
    <div class="container"> 
      <div class="nav2"> 
        <ul> 
          <li><a href="#" class="link">Web Design</a></li> 
          <li><a href="#" class="link2">App Design</a></li> 
          <li><a href="#" class="link3">Graphic Design</a></li> 
          <li><a href="#" class="link4">Game Design</a></li> 
 
        </ul> 
      </div> 
    </div> 
  </div> 
</div>

Нужно сделать так

у меня получается вот так

Answer 1

Не используйте position: absolute там где это не нужно, к тому же не понимая, что это и как работает.
Что бы на размер блоков не влиял их контент им нужно задать ширину. В вашем случае у вас 4 пункта, которым можно задать относительную ширину с помощью функции calc((100% - 90px) / 4) учитывая отступы.
Иконку вставляем в ссылку перед текстом. Для выравнивания используем flex - один из возможных вариантов
Моё мнение, если элементы меню будут responsive(хоть немного менять свои размеры), то лучше сделать ее через clip-path или svg.

.wrapper { 
  width: 100%; 
  height: 100%; 
} 
 
.container { 
  max-width: 1170px; 
  margin: 0 auto; 
} 
 
.nav2 { 
  width: 100%; 
  //border-bottom: 1px solid gray; 
} 
.nav2 ul { 
  margin: 0; 
  padding: 0; 
    list-style: none; 
} 
.nav2 ul::after { 
  display: table; 
  clear: both; 
  content: ''; 
} 
.nav2 li { 
  float: left; 
  width: calc((100% - 90px) / 4); 
  margin-right: 30px; 
} 
.nav2 li:last-child { 
  margin: 0; 
} 
 
 
.link { 
  width: 100%; 
  height: 140px; 
  display: flex; 
  flex-flow: column nowrap; 
  justify-content: flex-end; 
  align-items: center; 
  background: #eeeeee; 
  text-align: center; 
  position: relative; 
  color: #444444; 
  text-transform: uppercase; 
  font: bold 16px Montserrat, sans-serif; 
  text-decoration: none; 
} 
 
.link:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  width: 100%; 
  height: 55px; 
  background-color: #eeeeee; 
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); 
clip-path: polygon(50% 100%, 0 0, 100% 0); 
} 
 
.link:hover { 
  color: #ffffff; 
  background: #ff7200; 
} 
 
.link:hover:after { 
  background-color: #ff7200; 
} 
.icon { 
  margin-bottom: 15px; 
}

<style> 
  @import url('https://fonts.googleapis.com/css?family=Montserrat'); 
  @import url('https://fonts.googleapis.com/css?family=Montserrat:700'); 
  @import url('https://fonts.googleapis.com/css?family=Raleway'); 
</style> 
 
<div class="wrapper"> 
  <div id="web" class="web"> 
    <div class="container"> 
      <div class="nav2"> 
        <ul> 
          <li><a href="#" class="link link1"><span class="icon"><img src="https://placeholdit.co//i/50x50" alt=""></span> Web Design Web Design Design</a></li> 
          <li><a href="#" class="link link2"><span class="icon"><img src="https://placeholdit.co//i/50x50" alt=""></span> App Design</a></li> 
          <li><a href="#" class="link link3"><span class="icon"><img src="https://placeholdit.co//i/50x50" alt=""></span> Graphic Design</a></li> 
          <li><a href="#" class="link link4"><span class="icon"><img src="https://placeholdit.co//i/50x50" alt=""></span> Game Design</a></li> 
        </ul> 
      </div> 
    </div> 
  </div> 
</div>

Answer 2

В простыню не вчитывался, но однозначно есть три железобетонных решения: