Font awesome 아이콘 정렬 문제

상황

현재 Bootstrap 4 를 사용해서 프로젝트를 진행 중입니다.
bootstrap 4는 버전이 beta 상태로 있지만 어차피 나중엔 쓸테니까 처음으로 시작하는 프로젝트는 모두 bootstrap 4 로 작성 중 입니다.

Bootstrap 4 에는 기존에 있던 Glyphicons 가 사라졌습니다.

그래서 기존 Glyphicons 를 사용하지 않고 아이콘 버튼을 만들기 위해 font awesome 을 사용하게 되었습니다.

설치하면 font-awesome 이 내장되어 있습니다.

글 작성일 현재 README 문구를 보면 버전을 확인 할 수 있습니다.

Vue-Awesome is built upon Font Awesome v4.5.0 and depends on Vue.js v2.0.1+.

Vue-awesome code using Pug

icon(name='archive')
span Zones

Font-awesome 에 있는 아이콘과 link를 생성해보면 아래 이미지와 같은 align 관련 문제점을 확인 할 수 있습니다.

저는 .btn class 는 사용하지 않으므로 제외 했습니다.

.fa-icon {
    vertical-align: middle;
    margin-right: 0.5rem;
}

입력 후, 화면을 확인하시면 아래와 같이 아이콘이 정렬된 모습을 확인 할 수 있습니다.