안녕하세요.

핀코인입니다.

저희가 작년에 font-awesome 4.7.0 버전을 이용해서 사이트 리뉴얼을 했습니다.

그리고 이번에 새해를 맞아 산뜻한 느낌을 주기 위해서 font-awesome 5.6.3 버전으로 업데이트 완료했습니다.

<link rel="stylesheet" 
            href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

기존 4.7.0을 사용하기 위한 css 링크 태그를 아래와 같이 5.6.3 버전으로 수정합니다.

<link rel="stylesheet"
            href="//use.fontawesome.com/releases/v5.6.3/css/all.css"
            integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
            crossorigin="anonymous">

단순히 이렇게 줄만 바꿔주면 5.6.3 무료 버전을 사용할 수 있습니다. 일반적인 아이콘은 연 60달러 Pro 유료 플랜을 구독하지 않더라도 무료 버전으로도 충분히 많은 비주얼 효과를 줄 수 있습니다.

그런데 이번에 업데이트하면서 얼마 되지 않는 페이지수인데도 상당히 많은 FontAwesome 아이콘을 이용해서 사이트를 만들었다는 것을 느꼈습니다. 프로젝트에 걸쳐서 전반적인 치환을 하려면 생각보다 꼼꼼히 살펴보고 깨지는 아이콘이 없는지 잘 테스트해야 합니다.

4.0 버전을 업그레이드하기 FontAwesome 공식 문서가 있어서 이를 참고해서 핀코인 사이트를 업데이트했습니다.

먼저 기존 코드 4.x 버전 형식의 코드를 살펴보면 다음과 같습니다.

<i class="fa fa-camera-retro"></i>

fa는 prefix이고 fa-아이콘 형식으로 스타일 class를 지정합니다.

그러나 5.x 버전에서는 fa prefix가 좀 더 세분화되었습니다.

• fab: 페이스북, 유튜브 같은 브랜드 사이트
• fas: FontAwesome Solid 스타일 아이콘
• far: FontAwesome Regular 스타일 아이콘(Pro 버전)
• fal: FontAwesome Light 스타일 아이콘(Pro 버전)

fa 뒤에 brand, solid, regular, light 약자가 따라 붙습니다. 그래서 5.x 버전 코드는 다음과 같습니다.

<i class="fas fa-camera-retro"></i>

실제 5.x 버전의 카메라 아이콘은 이렇게 보입니다.

5.x 버전으로 업그레이드하려면 호환성 체크를 위해 어떤 prefix를 붙여야 하는지 확인하고 아이콘 이름이 변경된 것은 없는지 일일이 확인해야 합니다. 생각보다 이름이 바뀐 것이 많아서 좀 귀찮은 작업이었습니다.

아이콘 이름 변경 사항 공식 문서에서 내용을 확인할 수 있습니다. 그외 고정폭을 위해 fa-fw 속성을 주는 것은 4.7 버전과 동일합니다.

무료 버전을 쓸 때 대다수가 Solid 스타일 아이콘이기 때문에 좀 더 아이콘이 두꺼워지고 뚜렷하게 보이는 느낌이 듭니다. 약간 더 가는 선이 필요할 때는 Pro 유료 버전 구독을 하셔야 합니다.

핀코인 사이트는 1인이 모든 것을 디자인하고 개발하는 사이트입니다. 이러한 무료 공개 아이콘 라이브러리는 비용 절감에 매우 도움이 됩니다. 본래 개발자로서 매우 매력적인 인터페이스 디자인까지는 아니더라도 어느 정도 깔끔한 마무리와 모양새를 마감할 수 있다는 것은 큰 장점입니다.

드디어 위와 같이 메뉴 기본 아이콘을 5.6.3 버전의 FontAwesome으로 업데이트했습니다.

언제나 새로운 모습을 보여드리기 위해 노력하는 핀코인이 되겠습니다.

새롭게 편리하게 그러나 가격은 언제나 최저가로 안심하고 믿고 상품권을 살 수 있는 곳은 바로 여기 핀코인입니다.

대한민국 1등 온라인 상품권 쇼핑몰 핀코인!

감사합니다.