CDN에서 손쉽게 Font Awesome 사용

3583 단어 HTMLcdnFontAwesome
어디서나 쓰고 있는 간단한 내용입니다만, 불필요한 정보를 생략하고, 최단으로 Font Awesome 를 사용할 수 있도록(듯이) 메모로서 써 둡니다.

샘플 코드



다음과 같이 쓰면 어떤 프레임워크라도 관계없이 Font Awesome을 사용할 수 있습니다.

sample.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <title>test</title>
</head>
<body>
  <i class="fas fa-thumbs-up"></i>
</html>

이런 식으로 아이콘이 표시됩니다.


보충으로 설명



css 파일을 읽는 URI 얻기



다음 줄에서 Font Awesome을 표시하는 css 파일을 읽습니다.
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

이 css 파일의 URI는 "font-awesome - Libraries"에서 얻을 수 있습니다.


사용할 아이콘의 HTML 가져오기



다음의 1행으로 아이콘을 표시하고 있습니다.
<i class="fas fa-thumbs-up"></i>

이 HTML은 Font Awesome 사이트로 이동하여 검색합니다.
자유로운 물건을 사용한다면 "Free Icons"(빨간색 테두리 부분)를 클릭합니다 (2021 년 8 월 현재).

표시된 아이콘에서 원하는 것을 찾아 클릭합니다.

빨간색 프레임 부분이 필요한 HTML입니다. 클릭하면 사본으로 얻을 수 있습니다.

<참고 사이트>
Font Awesome 5 아이콘을 CDN 및 다운로드 데이터로 브라우저 보기
Font Awesome 5는 공식 CDN으로 CSS 배포를 중단하는 것 같습니다.

잡기



현재는 Spring Boot라는 WEB 프레임워크를 사용하고 있습니다. 필요에 임박했을 때에 조사하면 좋을까 생각합니다.

좋은 웹페이지 즐겨찾기