HTML로 웹 아이콘 삽입하기. Font Awesome
#티스토리 아이콘, #웹아이콘
이미지를 사용하지 않고도 HTML을 활용해서 아이콘을 삽입 할 수 있습니다. Font Awesome은 폰트형식을 사용하기 때문에 이미지에 비해 크기 조절이 자유롭다는 장점이 있습니다. 웹폰트라고도 하죠. 폰트기 때문에 원하는 이미지를 사용할 수 없다는 점은 아쉽지만 사이트에서 다양한 폰트 형태를 제공하고 꾸준히 업데이트 해주고 있습니다.
그럼 Font Awesome의 사용법을 알아보겠습니다.
링크 추가하기 |
사이트의 <head>와 </head>사이에 다음의 링크를 추가해주어야 합니다.
fontawesome link.txt<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <!--[if IE 7]> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome-ie7.min.css"> <![endif]-->
아이콘 찾기 |
그리고 난 후 위 링크에서 아이콘을 찾아볼 수 있습니다. 원하는 아이콘을 찾거나 영어로 검색할 수 있습니다.
이런창이 뜨게되면 fa-search 부분에서 <i 로 시작하는 부분을 복사해 줍니다. 그리고 사이트에 붙여넣습니다.
그러면 이와 같이 원하는 웹 아이콘을 첨부할 수 있습니다.
크기 지정하기 |
<i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
위의 코드처럼 크기를 조절할 수 있습니다. 위처럼 HTML 코드를 입력하게 되면 아래와 같이 나타납니다.
fa-lg fa-2x fa-3x fa-4x fa-5x
카테고리 아이콘이나 타이틀 아이콘 등등 다양한 곳에서 사용할 수 있겠죠?
