인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

No author

This post's author information has been deleted.

Solid Front-End Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part 2]

Creating a commercially viable, responsive modern web page with modern HTML/CSS2

FontAwesome 버전

Written on

·

348

0

풀스택 Part2. 프런트엔드

섹션7 6강 05:42~05:59

 

제가 강의 코드를 따라 작성하면서 FontAwesome의 코드를 직접 카피해보니, 웹페이지에 아이콘이 안뜨더라고요. 뭐가 문제인지 싶어서 강의자료에 들어있는 코드를 복붙해보면 아이콘이 제대로 나왔고요.

 

FontAwesome이 업데이트 됨에 따라, 영상 촬영 당시와 현재 사용법이 달라진 것 같습니다!

 

이리저리 찾아본 결과,

CDN 링크(?)를 업데이트해주면 새로운 버전의 아이콘들도 사용할 수 있음을 확인했고요! (2강 11:34~11:43)

FontAwesome에서 아이콘 HTML 링크를 카피하여 아래와 같이 수정해주면 웹페이지에 제대로 뜨는것을 확인했는데요!

 <i class="fa-brands fa-python"></i> <!-- copy -->
 <i class="fab fa-python"></i> <!-- 수정 -->

영상을 다시 보니, 오히려 예전에는 수정 없이 써도 됐었네요.. 이거때문에 며칠을 헤맸는데..

 

제가 알아낸건 여기까지지만, 강사님의 시선에서 본 FontAwesome 5,6의 달라진 활용법이 궁금합니다..!

 

수고스러울 일이지만, 영상 업데이트를 해주신다면 참고하겠습니다!!

감사합니다!es6javascriptHTML/CSS

Answer 1

0

funcoding님의 프로필 이미지
funcoding
Instructor

안녕하세요. 답변도우미입니다.

우선 상세히 기재해주셔서 감사합니다. 그런데 사실 저희가 잘 이해를 못하는 것인지, 11:34 ~ 11:43 뒤에 나오는 fontawesome.com 의 링크를 CDN 링크라고 이야기해주신 것인지 조금 애매하더라고요. 그 위의 css cdn 은 아이콘과는 다른 CSS 라서요.

만약, fontawesome.com 의 링크를 이야기해주신 것이라면, 해당 링크는 그 앞의 영상에서 보여드린fontawesome.com 에서의 링크를 각자 이메일로 받으시는 것이거든요. 그러니까 각자 링크는 다른 것이 맞을 것 같고요.

해당 fontawesome.com 의 링크 주소는 해당 영상을 찍은 후로, 지금까지 수년간 바뀌지 않았습니다. 해당 fontawesome.com 의 링크를 통한 아이콘들은 심지어 저희 잔재미코딩 웹사이트에서도 사용하고 있거든요. www.fun-coding.org 에서도 계속 말씀해주신 아이콘들을 사용하고 있고, 잘 나오고 있고, 자료에 들어 있는 코드도 실행해봤을 때, 정상적으로 나오고 있습니다. 04_skill_section 폴더를 보시면 되실꺼예요.

fontawesome.com 이 버전이 업데이트된다고 해서, 기존 링크가 모두 무효화된다면, 전세계 모든 사이트가 갑자기 안되는 상황이 오거든요. 그래서 호환성을 위해서, 이와 같은 경우는 특별한 예외 케이스를 빼고는 있기 어렵다고 보시면 좋을 것 같습니다.

혹시라도, 저희가 놓친 부분이 있다면, 괜찮으시다면, dream@fun-coding.org 로 어떤 부분이 문제가 있었는지 본 글을 바탕으로 가볍게만 설명해주신다면, 바로 또 수정해보겠습니다.

감사합니다.

No author

This post's author information has been deleted.

Ask a question