fontawesome 겹치기( fa-stack )

https://fontawesome.com/

Font Awesome

웹 프로젝트를 진행할때 버튼에 이미지를 추가하는 형식으로 작업하고 있었다.

컨설턴트분께서 이 부분을 Font Awesome으로 변경해주셨는데 이유는 간단했다.

스타일을 적용할 수 있었던 것. 즉, 색깔이나 크기 등을 쉽게 변경할 수 있었다.

 

https://fontawesome.com/icons?d=gallery&m=free

Font Awesome

다만 조금 아쉬운점은 위의 링크에서 보여지는 것과 같이 무료로 제공되는 아이콘들이 꽤나 제한적이다.

프로젝트에서 카메라 켜기/끄기 관련 아이콘이 필요했는데 카메라로 검색하니 위의 3가지 밖에 없었다.

이는 pro에 가도 마찬가지였다. 결국 사용한 방법은 fa-stack 이었다.

https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

Font Awesome

위 경로에 나와있듯이 fa-stack이란 두가지 아이콘을 겹쳐서 쓸 수 있게 해준다.

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

위의 코드를 작성하면 사각형과 트위터 아이콘이 합쳐진다.

이 방법을 통하여 카메라와 슬래쉬를 이용하면 카메라 켜기/끄기를 구성할 수 있다.

    <span class="fa-stack fa-2x">
        <i class="fas fa-camera fa-stack-1x"></i>
        <i class="fas fa-slash fa-stack-1x" style="color: crimson;"></i>
    </span>

이렇듯 원하는 아이콘이 없다면 조합해 보는것도 방법이니 잘 활용해보도록 하자