기타활용 폰트어썸 CDN - 무료 아이콘 사용법과 CSS 사용방법
페이지 정보
조회 623회 작성일 22-07-07 11:28
본문
폰트어썸
무료 아이콘 사용법과 CSS 사용방법
아이콘 이미지를 일일이 만들기도 힘들고, 트래픽 관리도 불편할 때 사용할만한 것이 폰트어썸 CDN이다.
CDN이란, 콘텐츠를 빌려주는 서비스를 말한다. 그러니까 폰트어썸은 아이콘, 폰트 등의 웹사이트 재료를 가져다 사용할 수 있게 해 주는 서비스인 것이다.
폰트어썸 CDN - 무료 아이콘 사용법과 CSS 사용방법
폰트어썸 무료 아이콘 CDN
폰트어썸은 Ver4와 Ver5가 따로 존재한다.
Ver4은 회원 가입도 없이 무료로 사용할 수 있는 반면, Ver5은 회원가입을 해야 사용 가능하다.
물론 Ver5가 훨씬 다양하고 풍부한 편리성을 자랑한다.
웹디자이너까지 고용하며 일일이 아이콘을 만들던 수고로움이 덜하게 되었다.
단점이라면, 많은 곳에서 같은 모양의 디자인이 사용된다는 것이지만, 사용자 입장에서는 마치 심볼처럼 받아들이게 되는 편리성도 있으니, 장단점이 모두 있다고 보면 된다.
폰트어썸4 사용법
폰트어썸 Ver4의 사용법은 매우 간단하다. HTML파일에 코드를 복사해 넣기만 하면 된다.
위의 링크로 들어간 후 메뉴에서 "Icons"을 누른다.
그러면 아래쪽에 많은 수의 아이콘들이 뜨는데, 원하는 것을 클릭한다.
예를 들어, 첫 번째 아이콘을 클릭하면 아래와 같은 코드가 뜰 것이다.
[code]
<i class="fa fa-address-book" aria-hidden="true"></i>
[/code]
이것을 HTML을 열어서 아래처럼 필요한 곳에 복사해 넣으면 끝이다.
[code]
<span><i class="fa fa-address-book" aria-hidden="true"></i> 주소록</span>
[/code]
그러면 웹페이지가 불러질 때 자동으로 폰트어썸 사이트에서 아이콘을 불러와서 보여준다.
폰트어썸5 사용법
Ver5의 사용법은 조금 다르다. 폰트어썸 Ver4은 회원가입도 없이 바로 사용할 수 있었던 것과 달리, Ver5은 무료 회원가입을 해야 사용할 수 있고, 더 많은 서비스를 받으려면 Pro 멤버가 되어야 한다.
이후의 사용방법은 아래의 순서대로 하면 된다.
- 회원 가입을 하고 로그인 한 후, "Create Your First Kit"를 눌러서 Kit를 생성한다.
- Kit에 나온 코드를 복사해서 자신의 HTML에서 <head> 부분에 붙여 넣기 한다.
- 폰트어썸 Ver5 사이트에서 원하는 아이콘이나 폰트를 고른다.
- 각 아이콘마다 있는 코드를 복사한다. (예 <i class="fa-solid fa-circle-chevron-right"></i>)
- 자신의 홈페이지로 와서 아래처럼 코드를 붙여 넣기 한다.
[code]
<span><i class="fa-solid fa-circle-chevron-right"></i> 주소록</span>
[/code]
폰트어썸 CDN의 CSS
폰트어썸이 편리한 것은 또 하나가 있다. 자유자재로 모양을 편집하고 디자인할 수 있다는 것이다.
사용 방법도 아주 간단하다. CSS파일을 열어서, 일반 글자꼴을 디자인하듯이 코드를 넣으면 된다. 아래는 .css 파일을 열어서 입력한 코드다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
[code]
<style type="text/css">
span { color:#ff0000; font-size:1.5rem; }
</style>
[/code]
위의 코드는 빨간색의 약간 큰 크기를 정하는 스타일 코드다.
즉, 보통의 CSS 디자인처럼 사용할 수 있으므로 매우 편리한 것이어서 폰트어썸이 인기있는 것이라고 말할 수 있겠다.
관련링크
-
https://fontawesome.com/v4/
185회 연결 -
https://fontawesome.com/
91회 연결