awesome Icon 및 Google Font 사용법

:raising_hand: 프론트엔드 개발관련 공부내용을 기록하는 포스트 입니다.

1. awesome Icon 이 무엇인가요?

image

Awesome Icon에서 우리는 다양한 icon들을 무료로 사용 가능하다.

2. 프로젝트 적용 방법

2-1. 사이트 회원 가입

위 URL에 접속하여 회원가입을 하고 내 계정의 고유 Kit을 생성하면 나만의 Kit Code를 제공한다.

image

2-2. 프로젝트 설정

해당 <script> 태그를 내 프로젝트에 head 안에 붙여넣어 적용한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>vue-todo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      href="./src/assets/favicon.ico"
      type="image/x-icon"
    />
    <link rel="icon" href="./src/assets/favicon.ico" type="image/x-icon" />
    <script
      src="https://kit.fontawesome.com/8c8829426d.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="app">
      <font-awesome-icon icon="fa-thin fa-alarm-plus" />
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

3. Google Font 적용방법

위 URL에 진입하여 원하는 폰트를 고른 뒤 아래 보이는 오른쪽 link를 내 프로젝트에 붙이면 된다.

image

<!DOCTYPE html>
<html lang="en">
  <head>
    ...생략
    <link
      href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

You may also enjoy