fontawesome 아이콘 사용하기

우리가 웹 페이지를 만들 때, 이미지의 한계에 대해 알아야 한다. 이미지는 내 마음대로 색상을 바꿀 수도 없고 원래 사이즈보다 크기를 키우게 되면 해상도의 문제 때문에 이미지가 깨지거나 화질이 낮아진다. 하지만 이제부터 배우는 아이콘은 그러한 문제들에서 자유롭다.
아이콘은 개발자들도 많이 사용하는 폰트어썸(https://fontawesome.com/v5/search)이라는 사이트에서 구할 수 있다.

사용하는 방법은 codepen에서 settings -> CSS -> stylesheet검색하는 곳에 "fontawesome"이라고 검색한 후, 아래 나오는 링크를 복사해 html코드 상단에 link태그를 만들고 붙여넣는다.

그런 후에 원하는 아이콘을 검색해 들어간 후 아래보이는 이 코드를 복사해서 붙여넣기만 하면

아이콘을 사용할 수 있다.

아이콘들은 색상, 크기를 마음대로 부여할 수 있는 뿐만 아니라 :hover를 이용해서 커서를 가져다대면 색상이 바뀌는 효과까지 구현할 수 있다.