[HTML/CSS] 웹페이지에 폰트, 아이콘 추가하기 - 구글 폰트(Google Fonts), Font Awesome 사용법

Recent Posts

Recent Comments

Tags more

Today

Total

관리 메뉴

👩🏻‍💻

[HTML/CSS] 웹페이지에 폰트, 아이콘 추가하기 - 구글 폰트(Google Fonts), Font Awesome 사용법 본문

WEB/HTML & CSS

[HTML/CSS] 웹페이지에 폰트, 아이콘 추가하기 - 구글 폰트(Google Fonts), Font Awesome 사용법

tskyoi 2020. 7. 30. 10:04

Google Fonts 사용법

https://fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

1. 폰트 선택

Google Fonts에 접속한 후 검색, 정렬을 이용하여 사용할 폰트를 선택합니다.

2. 원하는 스타일 선택

제공되는 다양한 스타일 중에서 원하는 스타일을 왼쪽 Select this style을 클릭하여 추가합니다.

3. 코드 복사 및 적용

왼쪽에 팝업창이 뜨면 Embed를 클릭한 후 <link> 아래쪽의 코드를 복사합니다. 팝업창이 뜨지 않을 경우 오른쪽 위 About 옆의 아이콘을 클릭하면 창이 나타납니다.

<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">
</head>

HTML의 head영역에 복사한 코드를 붙여넣기 한 후, 다시 팝업창에서 CSS rules to specify families 아래쪽의 코드를 복사하고

<style>
body {
	font-family: 'Roboto', sans-serif;
}
</style>

body {
	font-family: 'Roboto', sans-serif;
}

HTML head 영역의 style 태그 내부, 또는 CSS에서 폰트를 적용하고 싶은 영역에 추가해주면 웹페이지에 폰트가 적용됩니다.

Font Awesome 사용법

https://fontawesome.com/

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

1. CDN 적용

Font Awesome 사이트의 첫 화면에서 Start for Free를 클릭하고, 이메일 주소를 작성합니다. 메일의 Confirm 버튼을 클릭하고 비밀번호를 설정해주면 코드가 생성됩니다.

코드 우측에 있는 Copy Kit Code를 눌러 복사해주고 HTML의 head 영역에 붙여넣어 줍니다.

<head>
<script src="https://kit.fontawesome.com/d5bfc6e03c.js" crossorigin="anonymous"></script>
</head>

2. 아이콘 적용

Icons 메뉴를 클릭하면 사용할 수 있는 아이콘의 목록이 나타납니다. 회색으로 표시된 아이콘은 Pro License를 가진 사용자만 이용할 수 있지만, 무료 버전으로도 아주 많은 아이콘을 이용할 수 있습니다.

원하는 아이콘을 선택한 후, Copy HTML 위치에 있는 코드를 클릭하면 자동으로 복사됩니다. 복사된 코드를 HTML에 아이콘을 적용하고 싶은 위치에 붙여넣으면 아이콘이 적용되는 것을 볼 수 있습니다.

<div>
<i class="fab fa-android"></i>Android
</div>

Font Awesome의 아이콘들은 폰트이기 때문에 HTML의 Font-style, CSS를 적용시켜 아이콘의 크기, 색상을 바꾸거나 회전시키고 중첩시킬 수 있습니다.

자세한 사용법은 아래의 링크를 참조하시길 바랍니다.

1) 크기 변경

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

2) 색상 변경

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

3) 회전

https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

4) 중첩

https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

- 2020/07/30 수정

저작자표시 (새창열림)

'WEB > HTML & CSS' 카테고리의 다른 글

[CSS] 미디어 쿼리를 이용한 반응형 웹 만들기 (0)	2020.06.01
[CSS] 그리드 레이아웃(Grid Layout) (0)	2020.05.23
[CSS] 박스 모델 테두리 만들기 (0)	2020.05.22
[CSS] CSS 선택자 기본 정리 (0)	2020.05.20
[HTML] 웹페이지에 여러 기능을 추가할 수 있는 사이트 정리 (0)	2020.05.13