Tag : Font Awesome Font Awesome 5 / 아이콘으로 체크박스 디자인하기 체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 목차1 체크박스와 라벨 만들기2 아이콘 찾기3 라벨 앞에 아이콘 넣고 체크박스 보이지 않게 하기4 전체 코드 체크박스와 라벨 만들기 체크박스와 라벨을 […] Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기 Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 목차1 아이콘 선택하기2 기본 마커 없애기3 아이콘 추가하기4 전체 코드 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 […] Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기 목차1 HTML 문서에 연결하는 방법1.1 Script VS CSS1.2 CDN VS Local2 스크립트 이용하는 방법3 CSS 이용하는 방법 HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 […] Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기 목차1 HTML 문서에 연결하기1.1 CDN 이용하기1.2 다운로드 받아 사용하기2 아이콘 넣기 HTML 문서에 연결하기 Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다. CDN 이용하기 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 4.7.0은 Font Awesome 버전으로, […]
