WebSite X5Help Center

 
Klaus W.
Klaus W.
User

Google-Icons einbinden (Anleitung)  de

Auteur : Klaus W.
Visité 1400, Followers 1, Partagé 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>

Posté le
1 RéPONSES
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

Lire plus
Posté le de JÖRG L.