bootstrap 4.0 부터는 graph icon이 없어지고,
대신 font awesome을 사용합니다.
font awesome 설정방법입니다.
1. 다운로드
(1) URL : https://fontawesome.com
Font Awesome 5
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
(2) 위의 URL에서 2019/06/26 기준 ver 5.9를 다운로드 받을 수 있습니다.
- web에서 사용하기 위해서는 web 버전을 다운로드 받습니다.
2. 압축 풀기
3. html에 stylesheet link 설정
(1) all.min.css
<link type="text/css" rel="stylesheet" href="/plugin/fontawesome-free-5.9.0-web/css/all.min.css">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page import="egovframework.com.cmm.util.EgovUserDetailsHelper" %>
<!DOCTYPE html>
<html>
<head>
<title><spring:message code="system.name"/></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="/plugin/bootstrap-4.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/plugin/fontawesome-free-5.9.0-web/css/all.min.css">
<link type="text/css" rel="stylesheet" href="/plugin/jstree-3.3.7/themes/default/style.min.css">
<script type="text/javascript" src="/plugin/popper/popper.min.js"></script>
<script type="text/javascript" src="/js/egovframework/com/cmm/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/plugin/bootstrap-4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/plugin/jquery-validation-1.19.1/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="/plugin/jquery-validation-1.19.1/dist/localization/messages_ko.min.js"></script>
<script type="text/javascript" src="/plugin/jstree-3.3.7/jstree.min.js"></script>
<link type="text/css" rel="stylesheet" href="/plugin/fontawesome-free-5.9.0-web/css/all.min.css">
4. icon 사용
<body>
<span class="fa fa-car"></span>
<span class="fa fa-car" style="font-size:48px;"></span>
<span class="fa fa-car" style="font-size:60px;color:red;"></span>
<span class="fa fa-car" style="font-size:100px;color:green;"></span>
...
5. 결과
6. 참고
(1) icon 목록 참고 URL : https://fontawesome.com/changelog/latest
