fontawsom 적용안됨 문제 질문드립니다 선생님

Question

안녕하세요 선생님 질문이 있습니다 강의 8:00 쯤  # backtotop :: after 폰트어썸 적용시 네모가 나오는데요  구글 검색을 해보니 오타나 cdn 폰트어썸을 임포트하면 이런 네모가 나올수도있다고 하더군요 어떻게 해결해야할지 도움을 구해도 될까요 ? 감사합니다

잔재미코딩 DaveLee · Answer

안녕하세요. 그 부분은 두가지 문제를 유추해볼 수 있을 것 같습니다. 1. 다음 폰트어썸 관련 import를 정확히 하신 것인지가 문제일 수 있습니다. 이 부분은 영상 어딘가에 폰트어썸에서 어떻게 해당 부분을 가져올 수 있는지 설명을 드렸는데요. 해당 영상이 가장 이해하시기 좋을텐데... 못찾으시겠다면, 다음 링크를 통해 cdn 링크를 가져오시면 가장 좋을 것 같습니다. https://fontawesome.com/start < script src = "https://kit.fontawesome.com/f1def33959.js" crossorigin = "anonymous" > 2. 두번째 역시 오타 문제일 수 있습니다. 다음 코드들이 정확히 철자하나 안틀렸는지, 첨부드림 파일과 수강생님의 코드를 철저히 비교해보시면 어떨까 해요. 제가 이런 부분에 대해 별도 검색 꿀팁 (수업 전 들어주세요) 영상도 커리큘럼 전반부에 추가했는데, 참고해보셔도 좋을 것 같습니다. /* 아이콘 적용 방법 1. ::after (요소 뒤에 content 추가) 가상 요소에서, 2. content: "폰트어썸 유니코드" 를 넣고, 3. font-family: FontAwesome 이라고 넣으면 됨 */ #backtotop::after { content : ' \f077 ' ; font-family : FontAwesome; font-size : 1.5rem ; line-height : 40px ; color : #fff ; } 제 생각엔 저 폰트어썸 cdn 링크를 자신의 링크로 발급받아 쓰시면 되지 않을까도 생각이 듭니다. 마지막으로 다음 '궁금한 점에 대한 답변 찾기 꿀팁' 글도 읽어보시면, 훨씬 도움이 되실 것 같습니다. 궁금한 점에 대한 답변 찾기 꿀팁 질문하시기 전에, 다음 내용을 확인해주시면 훨씬 도움이 되실꺼예요. 첫번째, 질문 전 검색은 필수! google.co.kr 에서 질문에 대해 검색해보세요! 에러 메시지는 맨 마지막 라인을 복사해서 구글에서 검색해보시고, 질문에 대해서는 질문 관련 키워드들을 조합해서 구글에서 검색해보세요. 개발자들은 모두 이를 통해, 답변을 얻습니다. 한발짝 나아 가시려면, 반드시 이런 연습이 꼭 필요합니다. 사실 검색 없이 질문을 통해, 바로 답을 얻는 부분은 장기적으로는 큰 의미가 없어요. 궁극적으로는 프로그래밍은 답을 찾는 연습을 하셔야 합니다. 저는 한가지 확인이 필요한 사안을 위해, 20 ~ 30분 검색과 10개 이상의 블로그를 찾아보는 일을 하루에도 한두번씩 한답니다. 검색이 처음이신 분들은 개발자를 위한 정보 검색 팁 을 참고하시면 훨씬 성장하시는데 도움이 되실 것입니다. 두번째, 각 강의마다, 다른 분들께서도 이미 질문하신 사항들이 있습니다. 해당 부분을 확인해보시면, 답변을 기다릴 필요 없어서, 훨씬 도움이 되실 것 같습니다. 세번째, 각자 작성하신 코드 에러의 경우는 제가 제공해드린 코드자료를 수정하지 않고, 단계별로 그대로 실행해보신 후, 해당 코드와 자신의 코드가 어떤 부분이 다른지를 단계별로 확인해보시면, 훨씬 좋습니다. 키보드로 그대로 따라 치시기 보다, 제공해드린 코드를 그대로 복사해서 붙여넣고 테스트를 해보시면 좋고, 여기에서 자신의 코드와 다른 부분을 최대한 작게 쪼개서 조금씩 넣어보시면서, 테스트를 해보시면 가장 좋습니다. 각자 코드를 작성하신다면, 이렇게 작업해보시면 훨씬 도움이 되실꺼예요. 마지막으로, 질문하실 경우에는 어느 강의 영상의 어느 구간(가능하다면 몇분 몇초)에 대해 질문하시는 것인지 꼭 명기해주시면 좋습니다. 그래야 맥락이 이해가 가서, 보다 좋은 답변할 수 있습니다. 만약 구간 명기가 가능하지 않다면, 강의 영상 외적인 문의인지에 대해 확인 부탁드립니다. 본 질문 답변란은 강의 영상 이해를 돕기 위한 자리입니다. 강의 영상 외적인 부분은 양해를 부탁드립니다. 특히 극히 일부 개인별 코드 리뷰나 기능 구현등 무리가 되는 요청을 하시는 분들도 계셨는데, 좋은 강의가 선순환될 수 있도록 부탁드립니다. 잔재미코딩 Dave Lee 드림