Font awesome 아이콘 정렬 문제

By Category :

Font awesome 아이콘 정렬 문제

상황

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

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

링크 참조 Migrating to v4 · Bootstrap

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

GitHub – Justineo/vue-awesome: Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.

설치하면 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 관련 문제점을 확인 할 수 있습니다.

http://blog.uniqbuild.co.kr/wp-content/uploads/2017/09/picture-bootstrap-noalign.png

해결

Icon inside bootstrap button · Issue #52 · Justineo/vue-awesome · GitHub
여기에서 보이는 것처럼 css 를 추가해 줍니다.

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

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

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

http://blog.uniqbuild.co.kr/wp-content/uploads/2017/09/picture-bootstrap-align.png

Author :
github: https://github.com/9to6

카테고리

Count per Day

  • 27969Total visitors:
  • 31Visitors today:
  • 34Visitors yesterday:
  • 445Visitors last week:
  • 59Visitors per day:
  • 2017년 4월 7일Counter starts on: