아래와 같은 이쁜 아이콘을 쓸수 있는 방법이 있습니다.
Fontawesome CDN을 이용한 것인데요, HTML 문서 <head> </head>사이에 다음의 코드를 먼저 넣어주시면 됩니다.
그리고 FontAwesome 사이트로 들어가서
"Get Started"를 클릭합니다. 맨 아래 "No thanks~"버튼을 누릅니다.
위 메뉴에서 "Icons"를 선택하면 다양한 아이콘들이 보여집니다.
원하는 아이콘 하나를 선택합니다.
빨간 박스 두개를 쳐 두었습니다. 아래 빨간 박스를 복사해서 HTML에 그냥 붙여 넣으면 !
요렇게 나타납니다.
다음은 HTML에서 ul li 태그(tag)를 먼저 일반적으로 사용해 보겠습니다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
| cs |
<i class="fa fa-eercast fa-3x" aria-hidden="true"></i>
| cs |
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>li tag</title>
</head>
<body>
<ul>
<li>아메리카노 - 2,000원</li>
<li>카페 라떼 - 3,000원</li>
<li>에스프레소 - 2,500원</li>
</ul>
</body>
</html>
| cs |
지정하지 않은 li 태그는 검정 동그라미로 표시 됩니다.
검정 동그라미를 Fontawesome 아이콘으로 대체해 보겠습니다. 위의 첫번째 빨간색 박스를 보면 unicode라고 되어 있는데 이 코드값을 사용하면 됩니다.
<style>
li {list-style:none;}
ul li:before{content:"\f2da";margin-right:5px;font-family:fontawesome}
</style>
| cs |
CSS <style>태크에서 li 태그가 스타일이 없다고 선언 {list-style} 하고 content: 뒤에 unicode를 적어주면 됩니다. margin-right는 아이콘 뒤의 띄움값입니다. 그러면 목록이 이렇게 바뀝니다.
Fontawesome 아이콘을 이용한 전체코드입니다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>li tag</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
li {list-style:none;}
ul li:before{content:"\f2da";margin-right:5px;font-family:fontawesome}
</style>
</head>
<body>
<ul>
<li>아메리카노 - 2,000원</li>
<li>카페 라떼 - 3,000원</li>
<li>에스프레소 - 2,500원</li>
</ul>
</body>
</html>
| cs |