3. Log in 화면 만들기 (html-상태바2)

6) 아이콘 넣기-1

아이콘을 넣기 위한 쉬운 첫번째 방법으로는

Heroicons가 있음.

https://heroicons.com/

Heroicons

위의 사이트에서 원하는  아이콘 검색 후 html 파일에 복붙하면 됨.

아이콘이 입력된 모습

굉장히 긴 코드가 작성되며 아이콘이 입력됨.

 

 

7) 아이콘 넣기-2

또 다른 방법으로는

Fontawesome가 있음.

https://fontawesome.com/icons

Font Awesome

위 사이트에 접속해 이메일을 입력하여 가입하면 kit코드를 줌.

 

그 코드를 html 파일의 

kit코드를 작성한 모습

닫는 body태그의 바로 위에 작성함.

(꼭 </body> 태그 위에 작성해야 함)

 

다 작성한 후에

아이콘 검색하기

사이트에서 원하는 아이콘을 검색 후에 html 코드를 복사하여

 

wifi icon 자리에 붙여넣기함

원하는 자리에 붙여넣기 하면 아이콘이 입력되는 걸 볼 수 있음.

 

 

만약 적용이 안되는 경우 사이트의 검색창에서

Fontawesome의 검색화면

검색창 밑의 모드를 5.15.4버전으로 검색하면 적용이 될 것임.

 

 

 

8) 아이콘 모두 작성하기

원하는 모든 아이콘을 입력한 모습

원하는 자리에 검색한 html코드를 붙여넣기하면 아이콘이 적용됨.