Icoane de bază
Pentru a utiliza pictogramele Google, adăugați următoarea linie în interiorul <head> din pagina HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Notă: Nu este necesară descărcarea sau instalarea!
Adăugați material-icons clasa la un element inline și introduceți numele pictogramei:
Exemplu
Următorul cod:
<!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>
Rezultate în:
cloud
cloud
cloud Încearcă - l singur » Pictogramele Google sunt concepute pentru a fi utilizate cu elemente inline. <i> și <span> elemente sunt utilizate pe scară largă pentru pictograme.
Notă: pictogramele sunt materiale 24px în mod implicit.
De asemenea, rețineți că, dacă modificați culoarea recipientului pictogramei, culoarea pictogramei se schimbă prea. Aceleași lucruri merge în umbră, și orice altceva care devine moștenit folosind CSS. Excepția este proprietatea CSS font-size, care este întotdeauna 24px, dacă nu se specifică altceva.
Icoane barosan
Deși pictogramele materiale pot fi scalate la orice dimensiune, font-dimensiunea recomandată este fie 18, 24, 36 sau 48px:
Exemplu
Următorul cod:
<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>Rezultate în:
cloud
cloud
cloud
cloud
Încearcă - l singur »