본문 바로가기

Dev.FrontEnd/HTML_CSS

[Tip] Font Awesome 활용하기!



Font Awesome 활용하기!

위 sample에서 아래 방향 화살표가 Font-Awesome을 활용한 아이콘이다.


>>Font-Awesome 페이지로 이동하기>>



활용하는 방법은 간단하다.

위 예제의 코드를 살펴보면 쉽게 이해할 수 있다.

<div class="scroll-icon-down"> <a href="#"><i class="fa fa-angle-up"></i></a> </div>


i tag를 보면 class가 지정되있는 것을 볼 수 있다.

Font-Awesome 페이지에 있는 아이콘들 중 마음에 드는 아이콘을 클릭하면,

그 아이콘에 해당하는 class가 나온다.

그 클래스를 복사, 붙여넣기 해주면 된다!


물론,

여기에 추가적으로 해야할 사항이 한 가지 더 있다.

HTML파일을 읽어들일 때, i class = "  " 에 해당하는 클래스가 무엇을 가리키는지 알아야 하기 때문에,

<head> 태그에 추가로 삽입해야할 코드가 있다.

<link rel="stylesheet" href="/font-awesome-4.6.3/css/font-awesome.min.css">

혹시 뭔가가 잘 되지 않는다면 Font-Awesome 페이지의 Get Started 탭으로 들어가서 해보길 바란다.


이 아이콘들은 font 의 CSS가 적용된다.

따라서 위 처럼 아이콘의 크기를 키우고 싶다면 font-size를 조정하면 된다.

예시 코드이다.

.scroll-icon-down{
    padding-right: 50px;
    padding-bottom: 30px;
    text-align: right;
}
.scroll-icon-down i{
    padding: 5px 11px;
    border: solid #CFCFCF 3px;
    border-radius: 50%;
    font-size: 3em;
    color: #CFCFCF;
}


아이콘에 해당하는 것은 화살표일 뿐이고, 그것을 둘러싼 것은 border로 지정해주고 radius 값을 주어 둥그렇게 만들었다.

상당히 손이 많이 가는 CSS이다.

홈페이지에 많은 아이콘들이 있으니 적재적소에 배치하여 보다 직관적인 디자인을 만들어보길 바란다!



-..-