기존에 glyphicon을 사용하다 일부 단조로움이 있어 찾아보던 중 Font Awesome에서 제공하는 아이콘이 더 다양하여 상황에 맞게 사용할 수 있을 것으로 판단, 이를 적용하면 글을 정리해 본다.
.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메가 정도로 큰 사이즈가 아니므로 부담이 되지 않는다.
(백업을 위해 저장해 두었다.)
위 압축 파일명을 이용해 폴더를 생성하여 그대로 압축해제 하고 압축을 해제한 경로를 기준으로 아래와 <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 모드를 통해 확인하면 보다 빠르게 새로운 아이콘 적용유무를 확인 할 수 있다.
필자가 각 폰트별로 제공되는 아이콘 전체를 캡처해 두었으니 어떤 아이콘이 있는지 간략히 확인해 보면 적용전 도움이 될 것이다.
fab - 브랜드 아이콘, fa-brands-400
far: 배경이 없는 아이콘 fa-regular-400
fas: 기본 아이콘, fa-solid-900
'.Net' 카테고리의 다른 글
| Net - System.Data.SqlTypes.SqlNullValueException: Data is Null (0) | 2020.11.17 |
|---|---|
| .Net bootstrap - Tab Menu 만들기 (0) | 2020.11.13 |
| .Net/C#/Core - How to Get Client IP on HTTP (0) | 2020.11.10 |
| .NET core 3.1 - ActionLink glyphicon 사용하기 (0) | 2020.11.09 |
| .NET core 3.1 - File Download (0) | 2020.11.09 |
