WebSite X5Help Center

 
Klaus W.
Klaus W.
User

Google-Icons einbinden (Anleitung)  de

Autor: Klaus W.
Besucht 914, Followers 1, Geteilt 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>

Gepostet am
1 ANTWORTEN
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

Mehr lesen
Gepostet am von JÖRG L.