기본 아이콘
구글 아이콘을 사용하려면 내부에 다음 줄을 추가 <head> HTML 페이지의 섹션 :
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
참고 : 다운로드 또는 설치가 필요하지 않습니다!
추가 material-icons 인라인 요소에 클래스와 아이콘의 이름을 삽입 :
예
다음 코드 :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
결과 :
cloud
cloud
cloud »그에게 자신을보십시오 구글 아이콘 인라인 요소와 함께 사용하도록 설계된다. 은 <i> 과 <span> 요소는 널리 아이콘에 사용됩니다.
주 : 재료 아이콘은 기본적으로 24 픽셀된다.
또한 아이콘의 용기의 색을 변경하는 경우, 아이콘의 색이 너무 변경됩니다. 같은 일이 그림자와 CSS를 사용하여 상속되는 다른 용도로 간다. 예외는 다른 뭔가가 지정되지 않는 한, 항상 24 픽셀 인 CSS 글꼴 크기 속성입니다.
상당한 크기의 아이콘
재료 아이콘이 크기를 확장 할 수 있지만, 권장 글꼴 크기 중 하나를 18, 24, 36 또는 48px입니다 :
예
다음 코드 :
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>결과 :
cloud
cloud
cloud
cloud
»그에게 자신을보십시오