Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하는 방법
Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다.
Script VS CSS
Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다.
- SVG with JS
Modern, easy and powerful with new features and the most backwards compatiblity - Web Fonts with CSS
The classic way of using Font Awesome icons - great for die hards and older browsers
Script 방식은 IE 10 이상을 지원하는데, IE 10에서는 약간의 문제가 있습니다.
IE 10 does not support MutationObserver technology. The JavaScript library for Font Awesome relies on this in order to watch for changes made in the page.
CSS 방식은 IE 9 이상을 지원합니다.
만약 IE 8을 지원해야 한다면 Font Awesome 4를, IE 7을 지원해야 한다면 Font Awesome 3을 사용해야 합니다.
CDN VS Local
CDN을 이용하는 게 편하기는 하지만, 한국에서는 속도가 느릴 수 있습니다. 속도가 중요하다면 Font Awesome을 다운로드 받아 서버에 올려놓고 사용합니다.
스크립트 이용하는 방법
CDN을 이용한다면 다음 코드를 HTML 문서에 추가합니다.(숫자는 현재 버전에 맞게 수정하세요.)
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
다운로드 받은 파일을 사용한다면, js 폴더에 있는 all.min.js 또는 all.js를 연결합니다.
<script defer src="js/all.min.js"></script>
여기에서 원하는 아이콘을 찾고 클릭합니다.
코드를 복사합니다.
그 코드를 HTML 문서에 넣습니다. CSS로 크기, 색, 모양 등을 꾸밀 수 있습니다.
다음은 CDN을 이용하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<style>
.a {
text-align: center;
font-size: 80px;
color: #F44336;
}
</style>
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
</head>
<body>
<h1><i class="fas fa-camera-retro"></i></h1>
<h1 class="a"><i class="fas fa-camera-retro"></i></h1>
</body>
</html>
CSS 이용하는 방법
CDN을 이용한다면 다음 코드를 HTML 문서에 추가합니다.(숫자는 현재 버전에 맞게 수정하세요.)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
다운로드 받은 파일을 사용한다면, css 폴더에 있는 all.min.css 또는 all.css를 연결합니다.
<link rel="stylesheet" href="css/all.min.css">
다음은 CDN을 이용하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<style>
.a {
text-align: center;
font-size: 80px;
color: #F44336;
}
</style>
</head>
<body>
<h1><i class="fas fa-camera-retro"></i></h1>
<h1 class="a"><i class="fas fa-camera-retro"></i></h1>
</body>
</html>
CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다. 문법 @import "path/filename"; 예를 들어 @import "inc/abc.scss"; 는 inc 폴더 안의 abc.scss 파일을 가져옵니다. CSS 파일 가져오기 CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다. SCSS @import "inc.css"; CSS @import url(inc.css); SCSS 파일 가져오기 SCSS 파일을 가져오면 그 파일의 내용이 현재 파일에 추가됩니다. inc.scss h1 { margin: ...
아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법
아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...
Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법
사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...
코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...
대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...
cwebp를 이용하여 이미지를 WebP 형식으로 변환하는 방법
JPG, PNG 등의 이미지를 WebP 형식으로 변환하는 방법은 여러 가지가 있습니다. 그 중 구글이 제공하는 cwebp라는 프로그램으로 변환하는 방법을 알아보겠습니다. 다운로드 아래의 링크에서 다운로드를 할 수 있습니다. https://developers.google.com/speed/webp/docs/precompiled?hl=ko Windows용, Linux용, macOS용을 제공하고 있으니, 사용하는 OS에 맞게 다운로드합니다. 여기서는 Windows용으로 설명합니다. 압축 풀기 Windows용 파일을 다운로드한 후 압축을 풉니다. 압축만 풀면 되고, 설치는 따로 할 필요가 없습니다. D:\cwebp에 압축을 ...
웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법
웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...
Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...
개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux
Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { content: "\f105"; } 기본 마커 없애기 순서 ...