본문 바로가기
.Net

.Net/core - 무료 Icon, Font Awesome 5 사용하기

by 올엠 2020. 11. 13.
반응형

기존에 glyphicon을 사용하다 일부 단조로움이 있어 찾아보던 중 Font Awesome에서 제공하는 아이콘이 더 다양하여 상황에 맞게 사용할 수 있을 것으로 판단, 이를 적용하면 글을 정리해 본다.

 

https://asecurity.dev/entry/NET-core-31-ActionLink-glyphicon-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0?category=427489

 

.NET core 3.1 - ActionLink glyphicon 사용하기

Action Link를 통해 glyphicon을 이용하여 아이콘을 사용하고 싶을때 찾은 방법을 정리한 글이다. 1. CSS 및 폰트 추가 기본적으로 Bootstrap 4.x 버전부터는 라이센스 이슈로 glyphicon이 기본적으로 들어가

asecurity.dev

 

1. Setting

먼저 Font Awesome을 접근하여, Free로 제공하는 Font Awesome Free 버전을 다운로드 하자.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

 

용량은 5메가 정도로 큰 사이즈가 아니므로 부담이 되지 않는다.

(백업을 위해 저장해 두었다.)

fontawesome-free-5.15.1-web.zip
5.21MB

위 압축 파일명을 이용해 폴더를 생성하여 그대로 압축해제 하고 압축을 해제한 경로를 기준으로 아래와 <head> 영역에 css를 적용하자.

 

<head>

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

</head>

필자 기준으로 경로는 webroot에 경로를 만들어 생성하였기 때문에 아래와 같다.

<head>

<link href="/fontawesome-free-5.15.1-web/css/all.css" rel="stylesheet"/>

</head>

 

위 설정이 완료되면, Font Awesome Free 버전의 사용 준비가 완료된다.

만약 MVC 프로젝트라면, 레이아웃을 관장하는 View 페이지인 /Share/_Layout.cshtml에 위 css를 넣어주자.

 

2. Use

이제 폰트를 사용해보도록 하자. Font Awesome Free 은 총 4가지 로 나누어져 사용할 수 있다.

fas: 기본 아이콘, 가장 다양한 아이콘이 존재한다. fa로도 사용이 가능하다.
far: 배경이 없는 아이콘, 소량 구성되어 있다. 버튼과 같은 배경 색상을 고려해야 할 경우 유용하다.
fab: 브랜드 관련 아이콘, 유명 브랜드와 소프트웨어 아이콘을 사용할 수 있다.

사용은 아래와 같이 사용할 수 있다.

<i class="fas fa-user" style="vertical-align:middle"></i>--기본 아이콘<br />
<i class="far fa-user" style="vertical-align:middle">--배경이 없는 아이콘</i><br />
<i class="fab fa-git-square" style="vertical-align:middle">--브랜드 관련 아이콘</i>

 

가끔 아이콘 로딩이 정상적으로 되지 않는다면, 현재 사용하는 브라우저 캐시를 의심해보기 바란다. 

캐시를 삭제하거나, 크롬 기준 Secret 모드를 통해 확인하면 보다 빠르게 새로운 아이콘 적용유무를 확인 할 수 있다.

Secret Mode

필자가 각 폰트별로 제공되는 아이콘 전체를 캡처해 두었으니 어떤 아이콘이 있는지 간략히 확인해 보면 적용전 도움이 될 것이다.

 

fab - 브랜드 아이콘, fa-brands-400

fa-brands-400

far: 배경이 없는 아이콘 fa-regular-400

fa-regular-400

fas: 기본 아이콘, fa-solid-900

fa-solid-900

 

반응형