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

#html #css #css3 #html5

Как добавить иконки в блок, сделать чтобы все 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;
}



  

    

      

        
      
      

        
Home
        
Services
        
About
        
Works
        
Team
        
Contact
        
Blog
      
    
  
  

    

      

        
Welcome to our logic
        
We Make Awesome Theme For Your Business
      
      

        Get Started

      
    
  
  

    

      

        

          
Web Design
          
App Design
          
Graphic Design
          
Game Design

        
      
    
  





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

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

Ответы

Ответ 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;
}



  

    

      

        

          
 Web Design Web Design Design
          
 App Design
          
 Graphic Design
          
 Game Design
        
      
    
  



Ответ 2

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


через тег img 
через background 
через псевдоэлемент+background


Во всех трех вариантах иконку позиционируем абсолютно, что и дает независимость от
текста...