Integración de Iconos de Redes Sociales en HTML y CSS

Clase 7 de 26 • Curso Práctico de Maquetación en CSS

Juan Camilo García Ardila

student•

para los que no les sirva bien los flaticons es porque le tienen q poner la clase fimanager antes de llamar al flaticon ejemplo:

<div class="icons">
          <a href="#"><span class="fimanager flaticon-001-facebook"></span></a>
          <a href="#"><span class="fimanager flaticon-002-twitter"></span></a>
          <a href="#"><span class="fimanager flaticon-011-instagram"</span></a>
          <a href="#"><span class="fimanager flaticon-010-linkedin"></span></a>
          <a href="#"><span class="fimanager flaticon-008-youtube"></span></a>
        </div>

Jaime Daniel Piratova Castro

student•

Gracias. Solicione el problema

Fredy Frasser

student•

Gracias buen dato!

Marianna Guedez

student•

Así va quedando mi header vertical versión mobile:

Luis Alejandro Ortega Bermudez

student•

Super!

Ricardo Mazuera

student•

Que bello header y se ve interesante tu web.

Santiago Restrepo

student•

Bueno he estado estado viendo que muchos presentan el inconveniente de los iconos pequeños. La solución a esto es el pseudo elemento "::before" ... al aplicarle el font size a esto en específico se les aplicará si o si. Les dejo el ejemplo:

header .icons span::before{
    /* los íconos se tratarán como fuentes */
    color:white;
    font-size: 50px;
}

Ya ustedes deciden que tamaño le ponen 😉

Dulce Angelina Mercado

student•

Gracias por este dato :)

Santiago Restrepo

student•

Para eso estamos 💚

Esaú Maximino

student•

**Aquí tienen la carpeta con los mismos archivos que aparecen en el vídeo ** https://www.dropbox.com/sh/pi859sgbnt4ejyr/AADSWyJddaYu4TD5RPNGg_3ja/Social%20Media/font?dl=0&subfolder_nav_tracking=1

Bernardo Aguayo Ortega

student•

buena hermano!!!, gracias!!

Manuel Roberto Serrano Torres

student•

Todo un crack!!! Gracias.

Luis Diego Cárdenas Padilla

student•

Debería haber una clase sobre cómo darle estilos a los íconos. Bien fácil es descargar el archivo flaticon.css y linkearlo. Me hubiera gustado que lo haga desde cero.

Abraham Flores Cosme

student•

Este es el CDN de fontawesome 4.7 que trae las clases necesarias para íconos de redes sociales: https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

...

<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>

tania.ruiz

student•

Gracias, solucionó mi prolema

Andrés Camilo Ramos Romero

student•

Actualmente, no funcionan los links de assets, por lo que esta forma funciona y es incluso mejor

Gracias ‹3

Marianna Guedez

student•

Es importante que si vamos a subir nuestro proyecto a github, no subamos archivos binarios, generalmente los archivos como imágenes, videos o binarios compilados son mucho más grandes que los archivos de texto de nuestro código y si hacemos commit de ellos a nuestro repositorio, el tamaño de este se volverá muy grande. Les recomiendo que inserten sus imagenes por URL directo, adicional le dejo unas paginas para alojar imagenes, videos, gif y extraigan la url: https://imgur.com/ https://giphy.com/ https://postimages.org/

Miguel Andres Rendon Reyes

student•

Lo voy a tener muy en cuenta, muchas gracias

Milagro García

student•

Muchas gracias por el aporte<3

Mariana Cortés

student•

Para quienes se descargaron los assets del link de la primera clase y no encuentran la carpeta "font" está en assets>Social Media>font

Cynthia Jazmín Romero

student•

¡Muchas gracias!

Juan David HernandezPosso

student•

crack!

Luis Chavez

student•

Les dejo la URL de la carpeta font que uso en el video: https://www.dropbox.com/sh/pi859sgbnt4ejyr/AADSWyJddaYu4TD5RPNGg_3ja/Social%20Media/font?dl=0&subfolder_nav_tracking=1

Luis Chavez

student•

En uno de los primeros videos del curso, dejaron la url de Dropbox en donde estaban todos los assets del proyecto y ahi en la carpeta de Social Media esta la carpeta de fonts.

Bernardo Aguayo Ortega

student•

grande hermano!!

Rigoberto Maldonado

student•

Que tal campeon, buen dia... algo radicalmente diferente.

excelente...

Buzu B

student•

Me he dado cuenta que a los alumnos de platzi no les gusta que uno "hable mal" de los profesores, pero esos selectores no están para nada optimizados. Me da mala impresión.Por otro lado, en años recientes todas las buenas prácticas que traiamos de años se han ido perdiendo por lo que algunos han llamado el backendification del frontend.

Kevin Morales

student•

Gracias por el feedback acerca de los profesores :)

Daniel Sánchez

teacher•

¿Cómo sería un selector optimizado @buzu?

Wilson Fernando Antury Torres

student•

la etiqueta span actúa como un contenedor en línea, sirve para aplicar estilos a un texto o agrupar elementos en línea.

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/span

Pedro Guillermo Díaz Bautista

student•

Si es chico el icono, cambien font-size en flaticon.css por uno que se ajuste mejor, recomiendo entre 35-45px

[class^=&quot;flaticon-&quot;]:before, [class*=&quot; flaticon-&quot;]:before,
[class^=&quot;flaticon-&quot;]:after, [class*=&quot; flaticon-&quot;]:after {   
  font-family: Flaticon;
        font-size: 35px;
font-style: normal;
margin-left: 20px;
}```

Daniel Serna

student•

Flaticon ahora es de paga muchachos, mejor busquen en youtube un tutorial corto sobre como usar fontawesome, es basicamente lo mismo, pero gratis.

Mauricio Moreno Morales

student•

No me cargan los iconos me aparece así

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi blog</title> <link rel="stylesheet" href="./css/main.css"> <link rel="stylesheet" href="./css/font/flaticon.css"> </head> <body> <header class="header"> <section class="header-icons-container"> <div class="icons"> <a href=""><span class="flaticon-001-facebook"></span></a> <a href=""><span class="flaticon-002-twitter"></span></a> <a href=""><span class="flaticon-011-instagram"></span></a> <a href=""><span class="flaticon-004.linkedin"></span></a> <a href=""><span class="flaticon-008-youtube"></span></a> </div> </section> <nav> <section class="nav-logo-container"> <a href="/"><img src="" alt="Logo de mi blog"></a> </section> <section class="profile-link"> <a href="perfil.htm">Sobre mí</a> </section> </nav> </header> <main class="main">

 </main>

</body> </html>

Sergio Alejandro Trejo Cuxim

student•

Mira, presiona F12, te mostrará el inspector, luego click sobre la pestaña consola esto y revisa si no tiene algún mensaje en color rojo, si existe entonces quizá no esté cargando tu archivo de íconos, y sino entonces el problema puede ser tu archivo de íconos.

María Soledad Gil

student•

Mauricio. Fijate en el aporte de max32esau. A mi tamopoco me cargaba pero use la URL que puso el y use los archivos que vienen ahi y asunto resuelto. te aparecen los iconos, eso si en negro.

María Del Pilar Chávez Gutiérrez

student•

Me perdí!

En este video el profe solo pone la carpeta font y de repente salen mil carpetas más pero no dice de donde salieron?

La carpeta #flaticon.css no la tengo, como la hago o de donde saco esa info para poder seguir haciendo el proyecto de la mano del profe?

Ayuda amigos por fa!😬

David Campos

student•

En la sección de recursos está el repositorio de GitHub, ahí puedes encontrar los archivos y descargarlos. Te dejo el link/css/font) de la carpeta que mencionas.

Kevin Alexander Chari Castillo

student•

Esas carpetas salen al momento que descargas los iconos, de como fueron diseñados mediante el css y los preprocesadores, y creo que para descargar los iconos ahora te pide que seas premium, pero aquí te dejo un link en archivo .zip para que lo descargues y se encuentra la carpeta flatcoin.css y los iconos en foramto png, svc que necesitas.

César Andrés Aguilar Párraga

student•

Si buscan cambiar el tamaño de los iconos, editen en el archivo flaticon.css en la parte del font-size

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
        font-size: 24px;

Originalmente esta en 20px, yo lo cambie a 24px, se ve mejor, igual intenten.🔥🔥🔥

Luis Diego Cárdenas Padilla

student•

Por si quieren aprender a usar fontawesome: https://youtu.be/w7OSE1-8F8s

Maria Emilia Taborda

student•

un excelente recurso!!

Pablo Andres Fernandez Cari

student•

muchas gracias!!!

Mauricio Moreno Morales

student•

No me cargan los iconos me aparecen así

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mi blog</title>
     <link rel="stylesheet" href="./css/main.css">
     <link rel="stylesheet" href="./css/font/flaticon.css">
</head>
<body>
     <header class="header">
          <section class="header-icons-container">
               <div class="icons">
                    <a href=""><span class="flaticon-001-facebook"></span></a>
                    <a href=""><span class="flaticon-002-twitter"></span></a>
                    <a href=""><span class="flaticon-011-instagram"></span></a>
                    <a href=""><span class="flaticon-004.linkedin"></span></a>
                    <a href=""><span class="flaticon-008-youtube"></span></a>
               </div>
          </section>
          <nav>
               <section class="nav-logo-container">
                    <a href="/"><img src="" alt="Logo de mi blog"></a>
               </section>
               <section class="profile-link">
                    <a href="perfil.htm">Sobre mí</a>
               </section>
          </nav>
     </header>
     <main class="main">

     </main>
</body>
</html>

Danilo Fernandez

student•

Cuando declaras los css. Estas saliendo de una carpeta, tienes el index en una carpeta?

Jeyson David Vargas Crespo

student•

Hola, me pasaba lo mismo, coloca en la clase al principio fimanager, así:

<a href="/"><span class="fimanager flaticon-001-facebook"></span></a>```

Rafael Alvarez Cardona

student•

Tengo una pregunta! por que mis iconos no salen del mismo tamaño que en el ejemplo? :/

Ernesto Briceño

student•

le puedes cambiar el tamaño con font-size

Rafael Alvarez Cardona

student•

Bro! ya lo intenté y nada! :/

Integración de Iconos de Redes Sociales en HTML y CSS

Introducción

Personalización de Blogs con CSS y HTML5

Uso de DevTools en Chrome para Desarrollo Web

Análisis y creación del proyecto

Creación de un Blog Personal: Análisis de Diseño y Estructura

Estructura y Archivos Básicos para Proyecto Web con HTML y CSS

Creando la página principal

Maquetación HTML y CSS para un Blog Personal

Estilos CSS para Estructurar y Diseñar un Sitio Web

Integración de Iconos de Redes Sociales en HTML y CSS

CSS: Estilos y Posicionamiento de Elementos HTML

Maquetación y Estilos de Sección en HTML y CSS

Posicionamiento y Estilo de Imágenes con CSS

Integración de Fuentes Web en Proyectos HTML

Estilización de Botones y Texto en HTML y CSS

Creando página de Blogs

Maquetación de Páginas Web con HTML y CSS

Arquitectura de Clases CSS para Blogs en HTML

"Estilos CSS para Estructurar un Blog en HTML"

Estilos CSS para Imágenes y Textos en Diseño Web

Creación de Botón Genérico en HTML y CSS

Diseño y Estilo de Blogs con HTML y CSS

Centrado de Contenido con CSS: Uso de Contenedores Responsivos

Creando página de Blog

Diseño de Pantalla para Blog con HTML y CSS

Estilos CSS para Maquetación de Blogs en HTML

Creando página de perfil

Maquetación y Estilo de Páginas Web con HTML y CSS

Maquetación de Página de Perfil Web con HTML y CSS

Diseño de Página de Perfil con HTML y CSS Responsive

Blog responsivo

"Creación de Blogs Responsivos con Media Queries"

Cierre

Personalización de Blogs con HTML y CSS