폰트어썸 정보
폰트어썸본문
어제밤에 마크다운 에디터를 나리야에 적용시키다 보니
여기도 폰트어썸이 들어가게 해 놨네요.. (프로알라 에디터에도..)
개발자에게 이슈는 날려 놨는데 답변이 없어서
새벽부터 일어나서 변환되게 만들어 봤습니다.
폰트어썸 5에서는 프리픽스가 fas, far, fal, fad, fab 등으로 바뀌네요. 프로버전은 돈도내야되고.
https://fontawesome.com/icons?d=gallery&m=free
우선 fas버전만 적용해 보는 것으로..
:fa-camera::fa-arrow-alt-circle-left::fa-bath::fa-ban:
:fa-band-aid:
:fa-battery-quarter:
:fa-bed:
와 같이 타이핑하면
와 같이 나옵니다.
하나만 있으면 편한데, 프리픽스 처리가 문제네요.
:fas/fa-camera: :fab/fa-apple-pay:
아예 아래와 같이 처리를 해야 될 것 같습니다. 프리픽스를 넣어서
:fas fa-camera: :fab fa-apple-pay:
# :fas fa-camera: 로 했을 경우
잘되네요 꾸미기까지 폰트어썸 4는 나리야를 보니 크기에 대한 옵션이 있는데 5에서는 SVG가 지원되서
크기조절도 바로 되는 것 같습니다.
추가: https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons 를 보니 사이즈 옵션 fa-xs fa-2x등 옵션과 font-size로 크기 조절이 되네요 :fas fa-camera fa-xs: 식으로 해야 되나요...
참고:
1. 마크다운은 글자 꾸미기가 마우스사용을 최소화 하기 때문에 빠른 속도로 타이핑을 할 수 있다는 장점이 있습니다.
2. 폰트어썸 6가 나오고 있습니다.
2
댓글 8개
:fas fa-a까지 치면 이모지 처럼 화면 매칭되는 10개의 폰트어썸이 나오게 할려고 합니다.
여기서 화면에 나온 폰트어썸을 선택하면(디폴트 크기) 뒤에 타이핑하는 fa-lg를 타이핑 못한다는 것이고..
화면에 나오는 모양만 보고, 선택하는 것을 막고 다 타이핑을 하고 마지막 : 이 입력되면
그 때 html을 만들면 될 것 같습니다.
말은 쉬운데, 코딩이 안되니 참. 어렵네요