FontAwesome & Jdenticon 사용해보기

FontAwesome & Jdenticon

FontAwesome을 활용하여 이모티콘 사용하기

• static 폴더로 이동

$cd /yourProject/src/resources/static

• NPM 으로 FontAwesome 설치

$npm install font-awesome
#2020-05-28 기준 4.7.0ver

<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">

<i class="fa fa-user"></i>

Jdenticon

• 랜덤한 프로필 이미지를 생성해줌

$npm install jdenticon

-header 추가

<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>

• 이모티콘 만들기

<svg data-jdenticon-value="user127" th:data-jdenticon-value="${#authentication.name}"
     width="24" height="24" class="rounded border bg-light"></svg>

→data-jdenticon-value 에 value에 따라 이모티콘 모양이 정해지게 된다. 고로 변하지 않는 값인 username을 value에 넣으면 항상 같은 프로필 이미지가 나오게 된다.