반응형
Bootstrap 4에서 svg 아이콘을 만들수 있습니다.
Bytesize Icons
https://github.com/danklammer/bytesize-icons/blob/master/README.md
svg 아이콘들은 백터 형태이기 때문에 사이즈가 변화되어도, 이미지 처럼 깨짐이 없습니다.
카메라 아이콘 SVG 태그
<svg id="i-camera" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 8 L 9 8 12 4 20 4 23 8 30 8 30 26 2 26 Z" />
<circle cx="16" cy="16" r="5" />
</svg>
여기서 width="20" height="20"으로 주면, 사이즈가 줄게 됩니다.
stroke-width="3"를 주면 더 두꺼워 집니다.
[ 모서리 부분을 값을 선택 ]
| Style | stroke-linejoin | stroke-linecap |
|---|---|---|
| Round | round | round |
| Bevel | bevel | butt |
| Miter | miter | butt |
[ 두께를 다르게 하는 형태 ]
| Weight | stroke-width (px) | stroke-width (%) |
|---|---|---|
| Ultra Light | 0.5px | 1.5625% |
| Thin | 1px | 3.125% |
| Light | 1.5px | 4.6875% |
| Regular | 2px | 6.25% |
| Medium | 2.5px | 7.8125% |
| Bold | 3px | 9.375% |
| Heavy | 3.5px | 10.9375% |
반응형
'Web > Bootstrap' 카테고리의 다른 글
| Bootstrap를 이용한 마우스 오버시 Tooltip 설명 나오는 예제 (0) | 2021.02.04 |
|---|---|
| Bootstrap 4 달력 : datetimepicker (Bootstrap 3버전 업그레이드 버전) 인기 달력 (2) | 2020.01.15 |
| Bootstrap 4 Display 유틸리티 - table columns 을 hide 처리하기 (0) | 2018.11.30 |
| Bootstrap 토글 접기 Collapsible collapse 기능 (0) | 2017.08.23 |
| Bootstrap 반응형 테이블 FooTable (Plug In) 검색/페이지네이션 추가됨 (0) | 2017.08.17 |
| jQuery Bootgrid 간편한 그리드 표시 (페이지네이션, 검색 기능 PlugIn) (0) | 2017.07.22 |
| Bootstrap Table Grid sort 처리 - Datatables (0) | 2017.03.09 |
| Bootstrap 스크롤된 페이지 위로 올라가기 ( Back to Top ) (0) | 2016.12.29 |
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
(로그인하지 않으셔도 가능)