Foundation Icon Fonts 3

Clase 7 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Para crear nuestro menú con redes sociales vamos a utilizar icon-fonts de Foundation http://zurb.com/playground/foundation-icon-fonts-3, debemos descargar la librería y importarla desde nuestro archivo html

Veamos cómo crear el menú de redes sociales usando icon-fonts

David Camacho

student•

http://www.flaticon.com > Iconos en vector y personalizables.

https://icomoon.io > Iconos para la web.

http://htmlarrows.com/arrows > Iconos basicos con html.

Agustín Emanuel Soria

student•

si tienes emmet instalado puedes escribir “.column*3” y te genera 3 div clase column (tiene muchos atajos mas)

Cesar David Ramírez Dimaté

student•

Así es, o escribir i.fi-social-facebook para generar las clase respectiva. También recomiendo instalar AutoFileName en SublimeText.

David Ramirez

student•

Iconos de lenguajes de programacion en general.

http://vorillaz.github.io/devicons/#/main

Carlos Francisco Betancourt Requena

student•

Mi resumen:

Sitio de descarga: https://zurb.com/playground/foundation-icon-fonts-3

Para configurar los iconos en el proyecto es necesario guardar los archivos descargados dentro de la carpeta de nuestro proyecto.

En el archivo HTML debemos agregar la ruta al archivo foundation-icons.css, de la siguiente manera:

<link rel=“stylesheet” href=“nombre_de_carpeta_de_iconos/foundation-icons.css”>

Los iconos se insertan en el archivo HTML por medio de la etiqueta , utilizando la clase fi-nombre-icono, donde nombre-icono corresponde al nombre único de cada icono, los nombres de los iconos los podemos conocer en la misma página de descarga.

Por ejemplo para agregar el icono de facebook utilizamos el siguiente código:


William Reaño Reyes

student•

excelente clase

Sebastian Barberans

student•

Excelente como hace que se comprenda todo, gracias

David Daniel Castillo Nava

student•

http://fontawesome.io/ tambien me gusta usarla

Juan David lemus Rubiano

student•

te hago una pregunta, no es mejor usar span para los iconos ?
yo hice un curso de bootstrap y siempre se usa span para los iconos y luego si uno quiere un enlace se le agrega un ancor

Erick Orlando Velasco Martínez

student•

Yo tambien tengo la misma duda 😮

Norberto Sanchez

student•

En el caso de foundation se utiliza la para agregar los iconos luego dentro de esta etiqueta icono es llamado por el nombre que le da foundation, en la carpeta de icons que descargas podes verificar y vas a ver un archivo html que te muestra una vista previa con los nombre y reglas que le podes aplicar para que se vean mas grandes o mas chicos dependiendo como los quieras usar.

Teofilo Rosales Gama

student•

soy estudiante 2018 y los comandos no funcionan como en el video 😦

Cesar David Ramírez Dimaté

student•

Debes instalar Emmet en SublimeText

Jesus Sandrea

student•

Porque i y no span? y otra duda no me carga el icono y lo enlace bien y todo, que puede ser?

Jesus Sandrea

student•

ya lo solucione!

Diego Forero

Team Platzi•

Es bueno que comentes como lo solucionaste, si otro compañero tiene el mismo problema tu solución puede ayudarle. 😉

Marco Vinicio González Jiménez

student•

Que es más conveniente?

1.- Colocar los iconos por separado.

2.-Tener un spritesheet con todos los iconos del sitio y colocarlos en css como background dentro de una etiqueta con las coordenadas.

Lo pregunto porque en un proyecto, la persona de backend solicito un spritesheet, pero con los cambios que él hacía se movían todos los íconos del sitio. Entre otras complicaciones

Manuel Salv. Lemos Foncubierta

student•

El spritesheet viene mejor porque solicita menos request al servidor.

Singular Corp

student•

Gracias por los archivos cuando descargas foundation en su sitio web y eliges flex grid no te lo da te da otro
Saludos y gracias por los archivos de arriba

Diego Alberto Granda Terán

student•

Excelente curso y mas grande el profesor. Gracias.

Jorge Hernandez Rozo

student•

Excelente clase 😄 yo usaba Font Awesome para Bootstrap, pero esta tambien se ven muy interesante

ANTONIO XOYOC BECERRA FARIAS

student•

Esta librería seria útil para hacer one page?

Antoni Pierres Portocarrero Bustamante

student•

El proyecto que se está desarrollando es básicamente one page.

Sacha Lifszyc

teacher•

totalmente útil, sí!

Daniel Orlando Peña

student•

Tengo una pregunta, como hago para usar el nuevo logo de instagram? Foundation no ha actualizado esto?

Diego Forero

Team Platzi•

Puedes bajarlo y crear tu clase css propia y usarla en lugar de la que te da foundation.

Daniel Orlando Peña

student•

Gracias!

Juan David lemus Rubiano

student•

yo creo mas bien que se usa mejor el span, por que al usar el li, aparecen los punticos, y pues mucha gente recomienda usar el span

Cesar David Ramírez Dimaté

student•

Revisa los comentarios más arriba. La documentación de foundation dice que se debe utilizar

Itzel

student•

por que se utilizó id para section y no una clase?

Ricardo Azpeitia P.

student•

id -> Lo usas en una sola parte
clase -> Lo usas en varias partes

Teofilo Rosales Gama

student•

no me sale como en el video (febrero 2018)

<section id="social-container">
        <div class="row align-center text-center">
            <div class="small-1 column">
              <a href="#" target="_blank">
                <i class="fi-social-facebook"></i>
              </a>
            </div>
            <div class="small-1 column">
              <a href="#" target="_blank">
                <i class="fi-social-twitter"></i>
              </a>
            </div>
            <div class="small-1 column">
              <a href="#" target="_blank">
                <i class="fi-social-instagram"></i>
              </a>
            </div>
          </div>
    </section>

Singular Corp

student•

bueno tienes unos errores en el html, pero yo estoy en la misma postura que tu

Singular Corp

student•

las clases separa las de los elementos dales el espacio por eso no te lo respeta

leonardo vera

student•

no me aparece el simbolo de face
book

Cesar David Ramírez Dimaté

student•

Revisa bien si tienes definido bien el nombre de la clase.

<section id="social-container">
	<div class="row align-center text-center">
		<div class="column small-1"><a href="#" target="_blank"><i class="fi-social-facebook"></i></a></div>
		<div class="column small-1"><a href="#" target="_blank"><i class="fi-social-twitter"></i></a></div>
		<div class="column small-1"><a href="#" target="_blank"><i class="fi-social-instagram"></i></a></div>
	</div>
</section>

Foundation Icon Fonts 3

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman