[CSS] Font Awesome - 벡터 폰트 아이콘

CSS

[CSS] Font Awesome - 벡터 폰트 아이콘

힘없는염소 2015. 4. 6. 09:46

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    <!-- <link rel="stylesheet" href="css/font-awesome.min.css" /> -->
    <style>
        
        /*
        - 장점 : 아이콘을 이미지가 아닌 폰트로 사용한다는게 가장 큰 장점이다.
                벡터방식으로 화면 확대시 해상도에 관계없이 아이콘이 깨지지 않는다.
                모든 웹사이트에 적용 가능하다.
                무료오픈소스
             
        - 단점 : 아이콘이 일정 수준 이상으로 커지면 아이콘의 외곽선 부분이 거칠게 보이기도 한다는 것 
        */
        .fa-camera {
            color:#CC181E;
        }
        
    </style>
</head>
<body>
    <div>
        
        <i class="fa fa-camera fa-5x fa-spin"></i>   <!-- i 태그에 class명만 넣어주면 끝. -->
        
    </div>
</body>
</html>

예제 : http://fortawesome.github.io/Font-Awesome/icons/

저작자표시 (새창열림)