WebSite X5Help Center

 
Klaus W.
Klaus W.
User

Google-Icons einbinden (Anleitung)  de

Autore: Klaus W.
Visite 943, Followers 1, Condiviso 0  

Hab' mir mal angechaut, wie Google-Icons eingebunden werden können. Die sind ja wie alles bei Google, kostenlos. Vielleicht interessiert es ja den ein oder anderen. Dafür habe ich mal eine Doku erstellt (siehe Anhang).

Hier das Coding zum Abgreifen:

<!---------------------------->
<!-- Google Icons einbinden -->
<!---------------------------->

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

<!--------------------------->
<!—'Home-Icon' formatieren -->
<!--------------------------->

<style>

#iconHome {
font-size: 24px;
color: green;
}

</style>

<i class="material-icons" id="iconHome">home</i>

============================================

<!---------------------------->
<!-- Google Icons einbinden -->
<!---------------------------->

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

<!----------------------->
<!-- Icons formatieren -->
<!----------------------->

<style>

#iconHomeGreen {
font-size: 24px;
color: green;
}

#iconHomeBlue {
font-size: 36px;
color: blue;
}

#iconShoppingCart {
font-size: 48px;
}

</style>

<i class="material-icons" id="iconHomeGreen">home</i>
<i class="material-icons-outlined" id="iconHomeGreen">home</i>
<i class="material-icons-two-tone" id="iconHomeGreen">home</i>
<i class="material-icons-round" id="iconHomeGreen">home</i>
<i class="material-icons-sharp" id="iconHomeGreen">home</i>

<i class="material-icons" id="iconHomeBlue">home</i>
<i class="material-icons-outlined" id="iconHomeBlue">home</i>
<i class="material-icons-two-tone" id="iconHomeBlue">home</i>
<i class="material-icons-round" id="iconHomeBlue">home</i>
<i class="material-icons-sharp" id="iconHomeBlue">home</i>

<i class="material-icons" id="iconShoppingCart">shopping_cart</i>
<i class="material-icons-outlined" id="iconShoppingCart"> shopping_cart </i>
<i class="material-icons-two-tone" id="iconShoppingCart"> shopping_cart </i>
<i class="material-icons-round" id="iconShoppingCart"> shopping_cart </i>
<i class="material-icons-sharp" id="iconShoppingCart"> shopping_cart </i>

Postato il
1 RISPOSTE
JÖRG L.
JÖRG L.
User

+Top super gemacht, tolle Inspiration. Gruß Jörg. Kann ich bestimmt gut verwenden, möchte für meinen Reisekanal eine Webseite erstellen. zum Now & Then Reisekanal

Leggi di più
Postato il da JÖRG L.