search

quack337 / bbs1

0 stars 0 forks source link

fontawesome 아이콘 사용하기 #3

Open quack337 opened 3 months ago

quack337 commented 3 months ago

font awesome

https://fontawesome.com/v5/search?o=r&m=free 유명한 아이콘 라이브러리 font awesome

아이콘이 무척 많지만 대부분 유로(pro)이고, v5 버전의 경우 1600 개 정도만 무료이다. 그런데 1600 개 정도면 충분하다.

최신 버전인 v6 버전에 무료 아이콘이 좀 더 많지만, v6 버전은 CDN 링크를 제공하지 않기 때문에 사용하기 조금 불편하다.

font awesome v5 사용하기

<head> 부분에 아래 CDN 링크를 추가하자.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />

https://fontawesome.com/v5/search?o=r&m=free 이 링크로 들어가면 v5 버전의 무료 아이콘들을 볼 수 있다.

아이콘을 클릭하면 다음과 같이 html 태그가 보인다. image

아이콘의 크기 변경

<i class="fa fa-camera-retro fa-lg"></i> 33% 크게
<i class="fa fa-camera-retro fa-2x"></i> 두배 크기
<i class="fa fa-camera-retro fa-3x"></i> 세배 크기
<i class="fa fa-camera-retro fa-4x"></i> 네배 크기
<i class="fa fa-camera-retro fa-5x"></i> 5배 크기

위와 같이 fa-lg fa-2x fa-3x fa-4x fa-5x 서식을 넣어주면 아이콘 크기가 변경된다. image

다음과 같이 fa-spin을 넣어주면 아이콘이 계속 회전한다.


<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-sync fa-spin"></i>
<i class="fa fa-sync-alt fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-circle-notch fa-spin"></i>
quack337 commented 3 months ago

image

위와 같이 input 태그에 아이콘을 표시하자

div 태그로 묶기

<div class="input">
    <i class="fa fa-user fa-lg"></i>
    <input type="text" name="loginName" placeholder="아이디" />
</div> 
<br />

아이콘과 input 태그를 위와 같이 div 태그로 묶자. 그냥 위와 같이 구현하면 아이콘은 input 태그 왼쪽에 따로 표시된다. 아이콘을 input 태그 내부로 옮기려면, 먼저 이 div 태그에 다음과 같은 서식을 주어야 한다.

div.input { position: relative; display: inline-block; }

위와 같이 inline-block 서식을 주면 div 태그가 줄바꿈 되지 않으므로 <br /> 태그를 뒤에 붙여주었다.

아이콘을 input 태그 내부로 옮기기

다음 서식을 적용하여 아이콘 태그를 오른쪽으로 0.7em 옮겨서 input 태그 안에 넣자.

div.input i { position: absolute; left: 0.7em; top: 0.7em; color: gray; }

input 태그 여백

input 태그에 입력된 문자가 아이콘과 겹치지 않아야 하니, input 태그 내부 좌우 3em 여백이 필요하다.

div.login-form input { padding: 0.7em 3em; }
quack337 commented 3 months ago

commit: font awesome 아이콘 #3

quack337 commented 3 months ago

image

위와 같이 버튼에도 아이콘을 표시하자.

<button type="submit" class="btn blue">
    <i class="fa fa-sign-in-alt"></i> 로그인
</button>
<a href="signUp.html" class="btn">
    <i class="fa fa-user-plus"></i> 회원가입
</a>
quack337 commented 3 months ago

commit: 버튼 아이콘 #3