🍒⭐ 폰트어썸 이용하기 (fontawesome)

폰트어썸 이용방법

폰트어썸이 두달 전부터 업그레이드를 하고 있었습니다. 버전이 이제 6이네요.

버전 5와 링크방법이 같아서 일단은 작성하는데 어려움이 없습니다.

폰트어썸을 처음 이용하시는 분들에게 방법을 알려드립니다.

아래 사이트에 접속하세요.

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

처음에는 무료를 사용하시고 나중에 필요하시면 유료를 구입해서 쓰면 될 것 같습니다.

무료폰트는 다양한 선굵기의 아이콘을 쓰지 못하는 아쉬움이 있지만 거의 대부분 유용하게 쓸 수 있습니다.

무료폰트는 상단메뉴의 "Icons"를 클릭해서 확인할 수 있습니다.

왼쪽 메뉴의 "Free"를 클릭하면 무료로 이용할 수 있는 아이콘들을 확인할 수 있습니다.
오른쪽에 나오는 아이콘 중에서 진하게 표시된 폰트가 무료입니다.

폰트어썸 웹 Kit 생성하는 방법

웹에서 폰트어썸을 이용하기 위해서는 무료 폰트어썸 패키지를 다운로드 받아 링크하는 방식

그리고 다운로드 받지않고 이용할 수 있는 kit를 링크하는 방식이 있습니다.

서버용량이 많지 않을 때, 아~ 귀찮아 할 때, 간단하게 링크할 수 있는 kit 링크 추천입니다.

전에는 CDN으로 링크하는 것이 소개되어서 가입하지 않고도 이용할 수 있었는데, 지금은 CDN을 안내하는 페이지를 찾아볼 수 없네요. 그러나 가입해보니 CDN 소스가 있네요.
가입하지 않고도 쓸 수 있습니다.

폰트어썸 CDN입니다.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

폰트어썸 웹으로 링크하는 방법

1) 폰트어썸 홈페이지 첫화면에 "Start for free"를 클릭합니다.

2) 링크 소스 kit를 받기 위해서 이메일을 등록합니다. 이메일을 등록하여 자동 kit를 받으면 업그레이드 되었을 경우 변경된 설정이 업데이트 될 수 있다고 하네요.

3) 인증메일이 옵니다. 클릭해서 정보를 입력하고 가입하세요.

4) 로그인 한 후 Kit를 클릭하면 웹에서 링크해서 쓸 수 있는 js 경로가 생성되어 있습니다.

저는 이미 예전에 생성되었기 때문에 아래사진과 같습니다.

사진과 같지 않다면 "New Kit"를 클릭해서 생성하세요.

여기까지 했으면 받은 코드를 복사하여 html문서에 삽입하고 이용하면됩니다.

어썸폰트 js 링크는 <head>안에 넣어주면 됩니다.

샘플다운로드로 어떻게 넣었는지 확인할 수 있습니다. 오른쪽에 있는 your-templeat.html에서 소스를 넣어주는 위치를 확인하세요.

폰트어썸 웹 Kit 링크하는 방법

복사한 폰트어썸 링크 js 소스를 <head>안에 넣어줍니다.

이렇게 되면 웹에 폰트어썸을 쓸 준비가 되었습니다.

폰트어썸 본격적으로 이용하기

1) 웹 Kit를 <head>에 삽입했다면 이용할 폰트를 영어로 검색해줍니다.

2) 유의사항에 들어갈 폰트를 검색하기위해서 "notice"로 검색합니다.

이 중에서 빨강색 테두리로 표시된 폰트를 이용하기 위해서 클릭합니다.

3) 해당 폰트 페이지로 들어가게 됩니다. 여기에서 위에 있는 <i class="fas fa-exclamation-circle"></i>를 클릭하여 복사합니다. (그 옆에 SVG를 다운로드 받는 아이콘도 있는데 라이센스가 필요하네요.)

4) 폰트어썸이 들어갈 html 위치에 붙여줍니다.

<p><i class="fas fa-exclamation-circle"></i> 유의사항</p>
<ul>
<li>유의사항 첫번째는 무엇무엇입니다.</li>
<li>이것은 이렇게이렇게 해주세요.</li>
</ul>

아래와 같이 나옵니다.

여기에 검정색 말고 다른 색깔을 원한다면 css를 이용해서 변경할 수 있습니다. 모든 폰트어썸아이콘을 같은 색으로 변경한다면 .fas를 선택 각각 다르게 변경하고싶다면 뒤에 오는 .fa-exclamaton-circle로 지정하면 됩니다.

크기도 css 이용하거나 폰트어썸에서 소개하는 방법을 이용할 수 있습니다.

폰트어썸에서 소개하는 폰트 사이즈

뒤에 클래스를 덧붙여줍니다.
작은 폰트 : fa-xs

중간 폰트 : fa-sm

큰 폰트 : fa-lg

fa-2x 부터 큰숫자를 붙여서 폰트어썸 크기를 조절할 수 있습니다.

폰트어썸 각도 변경하는 방법

폰트어썸은 각도를 변경할 수 있습니다.

폰트어썸 애니메이션 이용방법

폰트를 회전하는 애니메이션으로 이용할 수 있습니다.
클래스값 뒤에 fa-spin을 추가하면 됩니다.

폰트어쎰에 설명되어 있는 아이콘을 이용해봤습니다.

이렇게 되는 군요. 이미지라서 정지되어 있는 모습만 캡쳐했어요.

설명페이지입니다. 여기에서 확인하세요.

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

주로 폰트어썸에 사이즈나 색깔 변경해서 많이 이용합니다.
아직 이용하기 전이라면 시도해보세요.

유료 이미지 사이트 12개 목록

요즘 들어 블로그나 유튜브 영상 콘텐츠 제작 시 무료 이미지보다는 유료 이미지를 사용하는 추세입니다. 과거에는 사진 편집 프로그램 내 자체 내장된 기본 이미지로도 충분히 퀄리티 높은 결

amango.tistory.com

이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기)

이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기) 이미지 맵은 하나의 이미지에 여러 개의 링크를 걸수 있어요. 여기에서 usemap의 맵이름과 map 태그안의 name의 맵이름은 동일해야 합니다. area shape

amango.tistory.com

마인드맵 프로그램 뭐쓰나요? 무료에다가 클라우드에 저장하네요.

마인드맵 프로그램 뭐쓰나요? 무료에다가 클라우드에 저장하네요. 마인드맵 뭐쓰세요? 저는 마인드맵 프로그램 알마인드맵 쓰다가 윈도우를 갈아서 또 설치해야하는데, 클라우드에 저장하

amango.tistory.com

저작자표시

'웹관리' 카테고리의 다른 글

🌰🍎🎁 이번 추석무료이미지 (추석 팝업이미지)올려봅니다. (5)	2020.09.19
🌰🍎🎁무료 추석이미지 직접 만든거 올려봅니다. (0)	2020.09.19
🍊 상업용 무료 추석이미지 사진, 추석팝업창 이미지 올려봅니다. (26)	2020.09.02
📌🎯⛱ 동영상 움짤만들기 (0)	2020.07.20
티스토리 애널리틱스 설치하기 (0)	2020.07.16

🍒망고츄츄🍌🌼

🍒⭐ 폰트어썸 이용하기 (fontawesome)

폰트어썸 이용방법

폰트어썸 웹 Kit 생성하는 방법

폰트어썸 웹으로 링크하는 방법

폰트어썸 웹 Kit 링크하는 방법

폰트어썸 본격적으로 이용하기

폰트어썸에서 소개하는 폰트 사이즈

폰트어썸 각도 변경하는 방법

폰트어썸 애니메이션 이용방법

'웹관리' 카테고리의 다른 글

티스토리툴바

🍒⭐ 폰트어썸 이용하기 (fontawesome)

폰트어썸 이용방법

폰트어썸 웹 Kit 생성하는 방법

폰트어썸 웹으로 링크하는 방법

폰트어썸 웹 Kit 링크하는 방법

폰트어썸 본격적으로 이용하기

폰트어썸에서 소개하는 폰트 사이즈

폰트어썸 각도 변경하는 방법

폰트어썸 애니메이션 이용방법

'웹관리' 카테고리의 다른 글

'웹관리' Related Articles

티스토리툴바