테스트 사이트 - 개발 중인 베타 버전입니다

폰트어썸

어제밤에 마크다운 에디터를 나리야에 적용시키다 보니

 

여기도 폰트어썸이 들어가게 해 놨네요.. (프로알라 에디터에도..)

 

개발자에게 이슈는 날려 놨는데 답변이 없어서

 

새벽부터 일어나서  변환되게 만들어 봤습니다.

 

폰트어썸 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:

 

와 같이 타이핑하면

800588803_1595772714.3684.png

와 같이 나옵니다. 

 

하나만 있으면 편한데,  프리픽스 처리가 문제네요.

 

:fas/fa-camera: :fab/fa-apple-pay:

 

아예 아래와 같이 처리를 해야 될 것 같습니다. 프리픽스를 넣어서

:fas fa-camera: :fab fa-apple-pay:

 

800588803_1595773838.0134.png

# :fas fa-camera: 로 했을 경우

800588803_1595773920.6258.png

잘되네요 꾸미기까지 폰트어썸 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가 나오고 있습니다.

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 8개

감사합니다!
@제이드 감사합니다.
와우 vditor에 폰트어썸까지 적용되면 최고겠네요!
@우성짱 문법이 생각이 안나네요. ㅠㅠ
:fas fa-a까지 치면 이모지 처럼 화면 매칭되는 10개의 폰트어썸이 나오게 할려고 합니다.

여기서 화면에 나온 폰트어썸을 선택하면(디폴트 크기) 뒤에 타이핑하는 fa-lg를 타이핑 못한다는 것이고..

화면에 나오는 모양만 보고, 선택하는 것을 막고 다 타이핑을 하고 마지막 : 이 입력되면
그 때 html을 만들면 될 것 같습니다.

말은 쉬운데, 코딩이 안되니 참. 어렵네요
@마젠토 이모티콘처럼 리스트가 쫙 나오고 선택하는 창이 있어도 좋을 듯 합니다.
@우성짱 어떤 모양인지 알기 위해서 그것이 필요한데, 폰트어썸 5 프리 버전이 거의 1500개정도 되네요..
@마젠토 헉.. 그건 좀 문제가 있네요 ㅎㅎ
@마젠토 https://aced.ga/free 여기에 이모지 적용되게 했습니다!

마젠토님이 적어주신 글에 이모지?는 적용이 안되더라구요. 이상하네요.

게시판 목록

자유게시판

글쓰기

첫글

3주 전
🐛 버그신고