---

구현되기 전 화면

처음 시도 당시 생각이 안나서 구현 못했었다..

---

구현된 화면

다시 영상을 보니, 너무 간단했다...

---

코드

HTML

    <div class="main__bottom">
      
      <div class="main__bottom-text">
        <P>Services</P>
        <h2>What We Offer</h2>
      </div>
      
      <div class="main__bottom-icons">

        <div class="icon">
          <i class="fas fa-tv fa-3x"></i>
          <h4>TV</h4>
          <p>Lorem ipsum dolor</p>
        </div>
      
        <div class="icon">
          <i class="fas fa-mobile-alt fa-3x"></i>
          <h4>Phone</h4>
          <p>Lorem ipsum dolor</p>
        </div>
      
        <div class="icon">
          <i class="fas fa-tablet-alt fa-3x"></i>
          <h4>Tablet</h4>
          <p>Lorem ipsum dolor</p>
        </div>

        <div class="icon laptop">
          <i class="fas fa-laptop fa-3x"></i>
          <h4>Labtop</h4>
          <p>Lorem ipsum dolor</p>
        </div>

      </div>
      
      <footer class="footer">
      	<div class="footer__icons">
        <div class="footer__icon">
          <i class="fab fa-google fa-3x"></i>
        </div>
        <div class="footer__icon">
          <i class="fab fa-twitter fa-3x"></i>
        </div>
        <div class="footer__icon footer__icon-last">
          <i class="fab fa-instagram-square fa-3x"></i>
        </div>
      </div>  
      
      

CSS

.icon i {
  background-color: white;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  padding-top: 25px;
  color: #4db6ac;
}

.footer__icon i {
  background-color: #4db6ac;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  padding-top: 25px;
  padding-left: 28px;
  color: white;
}

---

아이콘 배경 구현 방법

1. 해당 i 태그에 background-color를 배경색을 넣어준다.
2. 높이와 넓이를 알맞게 지정해준다.
3. border-radius로 둥글게 만들어준다.
4. padding으로 i 태그 안의 컨텐츠의 위치를 가운데 정렬 해준다.
5. color로 원하는 색을 지정해준다.