#번외_[Bootstrap4] 아이콘 사용법 변경 :: 개발/일상_Mr.lee

#번외_[Bootstrap4] 아이콘 사용법 변경

Posted by Mr.mandu.
2018. 10. 26. 14:34 개발/spring boot, gradle, mybatis Project

개인 프로젝트를 시간날때마다 만들고있었는데

그때는 Bootstrap3 버전을 사용하고 있었다.


최근 다시 시간이 나서 프로젝트를 만드는데...

Bootstrap4 버전이 나왔다고 하여 4로 변경하였더니


테이블 등 UI가 전부 깨져버렸다..


다시 고치는데 상당히 애를 썼다.

기회가되면 Bootstrap4


시간이 되면 테이블 넓이 설정 방법, 브라우저 크기별 UI 변경되는 내용을 포스팅해야겠다.



Bootstrap4 아이콘 사용 방법

기존 Bootstrap3 에서 아이콘을 사용할때

<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>


이런식으로 사용했습니다.

하지만, Bootstrap4에서는 다릅니다.

아이콘들을 다운받지 않고도 사용할수 있습니다.

위의 사이트를 참고해야 하세요.



빨간 네표 표시에 찾고자하는 아이콘을 입력합니다.

정확한 아이콘명을 모르기때문에 감으로 입력해야 합니다.




저는 삭제 아이콘으로 휴지통을 찾고자 하였습니다.

아이콘을 찾고 이름을 가져다 쓰면됩니다.

아이콘을 클릭해서 들어가면 사용법이 다 나와있습니다.



프로젝트에 적용시킨 모습입니다.



<i class="fa fa-trash"></i>
이러한 형태로 사용하시면 됩니다.
감사합니다.