En este artículo, veremos cómo agregar íconos de redes sociales a cualquier sitio web usando HTML y CSS
Acercarse:
Si desea adjuntar un ícono, entonces necesita un enlace CDN con una fuente increíble . Las redes sociales pueden ser muy útiles para promocionar y publicitar su sitio web. Si su marca tiene cuentas de redes sociales, sería prudente darles a los visitantes del sitio web la oportunidad de unirse a ellos y compartir sus publicaciones en sus líneas de tiempo.
Nota: Puede agregar íconos de redes sociales como imágenes (SVG, PNG) o ícono de fuente (Fuente impresionante). En este artículo, explore ambas formas.
Método 1: para usar los iconos de Font Awesome, agregue el siguiente enlace de CDN dentro de la sección <head>.
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Sintaxis:
<a href="#" class="fa fa-facebook"></a>
Ejemplo 1: En este ejemplo, estamos usando un ícono de fuente increíble (Iconos de Google e Iconos de Bootstrap) .
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.fa:hover {
opacity: 0.9;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
.fa {
padding: 20px;
font-size: 40px;
width: 60px;
text-decoration: none;
margin: 5px 80px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Social Media Icons</h3>
<!-- Add font awesome icons -->
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-reddit"></a>
</center>
</body>
</html>
Producción:
Método 2: para usar los íconos de Google, agregue el siguiente enlace dentro de la sección <head>.
<enlace rel=”hoja de estilo” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
Sintaxis:
<i class="material-icons">facebook</i>
Ejemplo:
HTML
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<style>
h1 {
color: green;
}
.material-icons {
padding: 10px;
font-size: 40px;
width: 40px;
text-decoration: none;
margin: 5px 80px;
}
.android {
background: #a4c639;
color: white;
}
.facebook {
background: #3b5998;
color: white;
}
</style>
<body>
<center>
<h1>GEEKSFORGEEKS</h1>
<h3>Google Font Icon</h3>
<i class="material-icons android">android </i>
<i class="material-icons facebook">facebook</i>
</center>
</body>
</html>
Producción:
Método 3: en este ejemplo, estamos usando imágenes SVG o PNG en un icono.
Sintaxis:
<svg class="bi bi-google" width="64" height="64" viewBox="0 0 16 16"> <path d=" "/> </svg>
Nota: Puede seleccionar el ícono SVG a través de varios sitios web como heroicons, íconos de arranque, etc. El ícono de arranque se usa en el siguiente ejemplo
HTML
<!DOCTYPE html>
<html>
<style>
h1 {
color: green;
}
.bi-twitter {
color: #55acee;
margin: 5px 20px;
}
.bi-google {
color: #dd4b39;
margin: 5px 20px;
}
.bi-youtube {
color: #dd4b39;
margin: 5px 20px;
}
</style>
<body>
<center>
<h1>GEEKSFORGEEKS</h1>
<!---- TWITTER ICON --->
<svg xmlns="http://www.w3.org/2000/svg" width="64"
height="64" fill="currentColor" class="bi bi-twitter"
viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003
9.341-9.334 0-.14 0-.282-.006-.422A6.685
6.685 0 0 0 16 3.542a6.658 6.658 0 0
1-1.889.518 3.301 3.301 0 0 0 1.447-1.817
6.533 6.533 0 0 1-2.087.793A3.286 3.286 0
0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429
3.289 3.289 0 0 0 1.018 4.382A3.323 3.323
0 0 1 .64 6.575v.045a3.288 3.288 0 0 0
2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23
3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067
2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32
0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
<!---- GOOGLE ICON --->
<svg xmlns="http://www.w3.org/2000/svg" width="64"
height="64" fill="currentColor" class="bi bi-google"
viewBox="0 0 16 16">
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139
1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978
15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689
0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0
0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792
4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301
4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003
a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
</svg>
<!---- YOUTUBE ICON --->
<svg xmlns="http://www.w3.org/2000/svg" width="64"
height="64" fill="currentColor" class="bi bi-youtube"
viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033
6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172
.883.22 1.402l.01.104.022.26.008.104c.065.914.073
1.77.074 1.957v.075c-.001.194-.01 1.108-.082
2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235
1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312
-5.569.334-6.18.335h-.142c-.309 0-1.587-.006
-2.927-.052l-.17-.006-.087-.004-.171-.007-.171
-.007c-1.11-.049 -2.167-.128-2.654-.26a2.007
2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986
-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0
1 0 7.68v-.123c.002-.215.01-.958.064-1.778l
.007-.103.003-.052.008-.104.022-.26.01-.104c
.048-.519.119-1.023.22-1.402a2.007 2.007 0 0
1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17
-.007.172-.006.086-.003.171-.007A99.788 99.788
0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157
-2.408L6.4 5.209z" />
</svg>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA