[Instagram] Header(2) - Font Awesome Icons 적용

 

 

Font Awesome 적용

• Package 설치
  • @뒤에 fontawesome이 아닌 fortawesome 주의

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons
                @fortawesome/free-solid-svg-icons

 

• Icons Module 파일 생성
  • 사용할 icon을 개별로 export
    • iconName은 Fontawesome Icons에 표시되는 명칭
      
      
  • solid(fas)는 해당 Icon의 화면일 경우에 표시. 해당 화면이 아닌 Icon은 regular(far) Icon 표시

// js/modules/icons.js
import { library, icon } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, far);

export const search = icon({ prefix: 'fas', iconName: 'search' }).html;
export const home = icon({ prefix: 'fas', iconName: 'home' }).html;
export const fasHeart = icon({ prefix: 'fas', iconName: 'heart' }).html;
export const farHeart = icon({ prefix: 'far', iconName: 'heart' }).html;
export const fasPaperPlane = icon({
  prefix: 'fas',
  iconName: 'paper-plane',
}).html;
export const farPaperPlane = icon({
  prefix: 'far',
  iconName: 'paper-plane',
}).html;
export const fasCompass = icon({ prefix: 'fas', iconName: 'compass' }).html;
export const farCompass = icon({ prefix: 'far', iconName: 'compass' }).html;

 

• Header에 Icon 적용

// js/layout/header.js
import '../../scss/header.scss';
import logo from '../../assets/logo.png';
import {
  search,
  home,
  fasHeart,
  farHeart,
  fasPaperPlane,
  farPaperPlane,
  fasCompass,
  farCompass,
} from '../modules/icons';

const header = `
  <div class="logo">
    <a href="/" tabIndex="0">
      <img alt="logo" />
    </a>
  </div>
  <div class="search">
    ${search}    
    <input type="text" placeholder="검색" />
  </div>
  <div class="icons">
    <a href="/" tabIndex="0">${home}</a>
    <a href="/" tabIndex="0">${farPaperPlane}</a>
    <a href="/" tabIndex="0">${farCompass}</a>
    ${farHeart}
  </div>
`;

const headerContainer = document.querySelector('#header .container');
headerContainer.innerHTML = header;

const logoEl = headerContainer.querySelector('.logo img');
logoEl.src = logo;

$borderColor: #dbdbdb;

#header {
  height: 54px;
  background-color: #fff;
  border-bottom: 1px solid $borderColor;

  .headerWrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 54px;
    z-index: 3;

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 54px;

      .logo {
        width: 103px;
        min-width: 40px;
        margin-top: 7px;
        transition: opacity 0.1s ease-out;

        img {
          max-height: 100%;
          max-width: 100%;
          object-fit: contain;
        }
      }

      .search {
        height: 28px;
        width: 215px;
        min-width: 125px;
        position: relative;

        .fa-search {
          position: absolute;
          left: 40%;
          top: 0;
          bottom: 0;
          margin: auto 0;
          color: #a5a7aa;
          font-size: 12px;
        }

        input {
          width: 100%;
          height: 100%;
          appearance: none;
          background-color: #fafafa;
          border: 1px solid $borderColor;
          border-radius: 3px;
          color: #262626;
          font-size: 14px;
          text-align: center;
          outline: 0;
          padding: 3px 10px 3px 26px;
          z-index: 2;

          &::placeholder {
            color: #a5a7aa;
          }
        }
      }

      .icons {
        display: flex;
        justify-content: space-around;

        svg {
          width: 22px;
          height: 22px;
          margin-left: 22px;
        }
      }

      a {
        color: #000;
        text-decoration: none;
      }
    }
  }
}

---

결과물

---

[ 참고자료 ]

https://fontawesome.com/v5.15/how-to-use/javascript-api/setup/getting-started

https://fontawesome.com/v5.15/how-to-use/javascript-api/setup/library

https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free 

https://dev.to/joeattardi/how-to-use-font-awesome-icons-in-a-vanilla-javascript-project-5b5b