가장많이 사용 되고 있는 웹 아이콘 폰트는 Font Awesome입니다.
Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다.
이번 포스팅에서는 Font Awesome를 적용하는 법을 알려드리려고 합니다.
1. CDN 선언
CDN이란 간단히 말해서 내부 로컬에 저장을 하지 않은 상태에서 외부 링크를 달아 적용시키는 방식이다.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
</body>
</html>위와 같이 <head>태그 사이에 추가를 하면 끝이다.
<!--HTML-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Pug-->
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN", crossorigin="anonymous")
<!--Haml-->
%link{rel: "stylesheet", href: "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", integrity: "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN", crossorigin: "anonymous"}Html, Pug, Haml 각각 사용에 맞는 링크를 추가하면 된다.
2. 로컬 적용 (다운로드 적용)
2-1 우선 로컬 적용은 fontawesome 사이트를 들어가서 다운로드를 받는다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
2-2 Start for Free를 이용하면 무료로 쉽게 사용할 수 있다.
2-3 (왼쪽 이미지) 로컬에 적용을 하기위해선 Download 클릭 후 (오른쪽 이미지) 다음으로 클릭을 해준다.
2-4 압축을 풀고 폴더를 열면 여러 폴더들이 보인다.
2-5 순서대로 CSS폴더에 들어가서 all.min.css(또는 all.css)를 웹 로컬로 이용하는 폴더에 추가한다.
2-6 js폴더에 들어가서 all.min.js(또는 all.js)를 웹 로컬로 이용하는 폴더에 추가한다.
2-7 webfonts폴더에 들어가서 파일 전부를 웹 로컬로 이용하는 폴더에 추가한다.
<link rel="stylesheet" href="css/all.min.css">
<script src="js/all.min.js"></script>
2-8 위 링크를 html에 추가를 한다.
3. 어썸폰트 사용법
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
어썸폰트 사이트에 들어가 상단 메뉴 Icons를 클릭 하면 위와같은 화면이 나온다. 마음에 드는 아이콘을 하나 클릭을 한후에
좌측 상단에 있는 <i>태그를 클릭 후 자동복사가 되며 html상에서 붙여넣기로 적용시키면 된다.
<i class="fab fa-500px"></i>
'Web Code > Web 지식' 카테고리의 다른 글
| 웹 디자인의 핵심 원칙과 트렌드 (0) | 2023.09.11 |
|---|---|
| 플러그인 예제 모음 (0) | 2022.11.11 |
| 휴대폰/디바이스 별 해상도 / Galaxy 폴더폰 해상도 / Galaxy Flip 3 / Galaxy Fold 3 해상도 (0) | 2021.11.18 |
| [Html] Font Awesome(폰트 어썸) 오류 해결법 (0) | 2020.07.25 |
| 컴퓨터/노트북 캡처 하는 방법 3가지 (0) | 2020.07.13 |
댓글