bootstrap3이 bootstrap4로 업그레이드 됬다.
그러면서 많은 변환점이 있었는데 필자가 느끼는 변화로는 glyphicons가 bootstrap에서 사라졌다는 것이다.
왜 없어졌는지는 모른다. 아래 공식사이트를 보자.
읽어보면 glyphicons가 bootstrap에서 드랍되었고 이제 기본적으로 사용하는 픽토그램은 없어졌다.
대신에 서드파티를 쓰라고 되어있는데 거기서 추천하는게 glypicons과 octions, font awesome이 있다.
그 중에서 가장 뜨고 있는게 바로 font awesome이다.
여러분도 이제 font-awesome을 사용하는게 좋다. 그럼 font-awesome에 대해서 보도록 하자.
먼저 설치를 하기 위해서 패키지에 있는지를 확인해보자.
보면 알겠지만 3개의 매이저 패키지 관리자에서 모두 사용하고 있음을 알 수 있다.
현시각을 기준으로 bower는 font-awesome 5버전을 사용하고 있고 yarn, npm은 4버전을 사용하고 있다.
사실... 4버전과 5버전은 매우 어마어마한 차이점을 가지고 있다. 그래서 여러분들은 가급적 5버전을 사용하기 바란다.
해당 홈페이지에서 검색하면 픽토그램을 찾아서 사용할 수 있다.
사용하는 방식은 how to use에 너무나도 자세히 나와 있으므로 이를 꼭 확인해주자.
보면 5버전과 4버전이 다름을 공식 홈페이지에서 언급하고 있다.
여러분이 느끼는 가장 큰 차이점은 fa클래스가 deprecated됬다는 것이다.
물론 사용못하는건 아니지만... 쓰지 않는걸 추천한다.
fas, far, fal은 사진을 보면 각각의 차이점을 알 수 있다.
또한 클래스 크기를 줄일 수 있다.
그럼 cdn을 사용하는 예시를 보도록하자. 버전은 5버전이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>
<body>
<!--user icon in two different styles-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!--brand icon-->
<i class="fab fa-github-square"></i>
</body>
</html>
자 이예제를 써보도록하자.
그럼 4버전에서는 어떻게 쓸까? npm을 사용한 예제를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
</head>
<body>
<!--user icon in two different styles-->
<i class="fa fa-user"></i>
<i class="fa fa-user"></i>
<!--brand icon-->
<i class="fa fa-github-square"></i>
</body>
</html>
4버전은 fa밖에 없다. 따라서 위처럼써야한다.
종류가 많이 없으므로 반드시 5버전을 쓰도록 하자.
'Usage > JavaScript' 카테고리의 다른 글
| [Cordova][Ionic][Vue][JavaScript]vue로 ionic사용하기 (0) | 2018.09.30 |
|---|---|
| [Package][Promise]Promise와 js에서의 동기화 - (1) (0) | 2018.09.23 |
| [Package]Vue.js (0) | 2018.02.18 |
| [Package]http-server와 live-server (0) | 2017.12.07 |
| [Package]forever과 nodejs 데몬(백그라운드)으로 실행 (0) | 2017.11.29 |