Ya hemos comenzado nuestro proyecto tenemos algo así.
La idea es que sea algo así y en este video vamos a ver cómo agregar estos íconos.
Es muy común casi todos los sitios web hoy en día tienen ya un menú de redes sociales y tenemos estos
dos iconos también un pin para que nos diga dónde es y un calendario para saber la fecha a lo largo
del diseño hay más iconos pero vamos a agregar nada más esto es una librería que permite agregar íconos
es Font.
Existen dos versiones una gratis y una de paga.
La gratis tiene todo lo que necesitamos así que le damos clic en este botón.
Y es bastante grande ya han agregado muchas cosas.
Damos clic para descomprimir y voy a abrir la carpeta.
Hay muchas cosas aquí por ejemplo vienen las opciones más avanzadas qué vas a encontrar cada uno de
estos íconos en las versiones Cedegé.
La ventaja que tienen esto es que los puedes utilizar en tus diseños por ejemplo sketch de Adobe Photoshop
e Ilustrador.
Puedes usarlos para crear tus diseños.
También hay uno Cedegé con JavaScript pero el que nos interesa es este que dice Waterfront con CSS abrimos
la carpeta y vamos a ver qué distintas versiones.
Cuando escribes código CSS hay varias formas de hacerlo es el SMS normal es lo que haremos en todo el
curso.
Hay algo que se conocen como preprocesador es algo que sean valés y algo que sea masãas.
También este incluye versiones para proyectos de ese tipo.
Abrimos GDL webcam y abrimos CSS abrimos la carpeta de CSS y vas a encontrar que también hay muchos
aquí vamos a importar el que dice o este incluye todo.
Movemos hacia la derecha desde el que tenemos Photoshop.
Vamos hacia atrás.
En ambos casos y este de Waterfront también lo vamos a mover.
Asegúrate que el Fonds lo muevas donde veas el índex punto HTML.
Tienes que estar en el mismo nivel al igual que la carpeta de CSS.
Todo tiene que estar en el mismo nivel.
Ya con eso podemos cerráramos volvemos al código y vamos a cargar esa hoja de estilos vamos a hacerlo
antes del Main Link real Stalling para que nos agregue una hoja de estilos para y está en la carpeta
de CSS y ponemos también el nombre Font Font Folsom Nyom o .1.000 CSS y de aquí vamos a abrir la página
de fondo.
Vamos a ver que por ejemplo nuestro diseño requerimos un ícono de Facebook que abrimos con todos damos
clic en icons y aquí vamos a buscar por Facebook esto te permite buscar todos estos son los iconos que
encuentras en la librería.
Esta nueva versión tiene más de 900 iconos de 2000 y tantos pero te muestra también los que son propios
ver que aquí en el listado hay unos que son un poco más claro eso sí sembró.
Esos no vienen en la versión gratis pero aquí puedes buscar por ejemplo Facebook te aparece el icono
de Facebook puedes dar click aquí y eso nos va a llevar al icono de Facebook.
Todas las opciones que hay por ejemplo de distintos colores.
Esto lo luditas con ese bebé.
Con ese bebé lo editas con lustrador o algo así y viene para descargar también el ícono por sí solo.
Como ese bebé pero también viene para copiar el código HTML copiar y abrimos a Tom y lo que vamos a
hacer es el lugar que diga Facebook reemplazamos con el ícono.
Volvemos al proyecto recargamos y vemos que aparece el ícono aquí.
Si no te aparece el ícono en esta parte asegúrate nueva cuenta que tengas cargado en CSS el fondo.
Al ser este archivo y que Watts Foncea esté donde se ve el índex también tenemos Twitter Pinterest YouTube
e Instagram son íconos a buscar por Twitter
hay dos opciones eliges el que más te guste.
Copiamos reemplazamos Twitter ahora vamos por Pinterest ponemos Pinterest también de nueva cuenta y
distintas opciones puedes elegir el que más te guste.
Nuestro caso es el tercero veamos reemplazamos YouTube
lasiguiente
me gusta más éste entonces copiamos YouTube y nos falta Instagram.
Si recargamos ya se van a ver cuatro iconos fractal de Instagram
Instagram.
Por cierto si quieres filtrarlos por categorías del lado izquierdo vas a encontrar todas las categorías
incluso de debería de venir uno de social o website ni siquiera viene como ninguno de esos dos pero
aquí vas a encontrar algunas de las distintas categorías y te va a mostrar los iconos relacionados a
esa categoría entonces el último era Instagram Tenemos Instagram.
Veamos el ícono y lo ponemos aquí.
Y a eso vamos a tener el menú de redes sociales le estaremos dando un poco más adelante.
También nos falta este calendario entonces lo buscamos aquí y abrimos icons pero normal los vas a encontrar
en inglés o no vienen en español pero si quieres pones Calendar te aparecen distintos calendarios vamos
a seleccionar este y copió el texto el Calendar va antes de la fecha.
Entonces lo ponemos aquí guardamos cambios nuevamente recargamos aparece el calendario y nos falta este
pin de similar los de Google Maps suponerle aquí nada más Pin
y hay distintos pines de markers Map Map Market es como va a aparecer es este de aquí click y copiamos
y lo colocamos aquí en el lugar donde va a hacer la conferencia de diseño.
Ya tenemos nuestros íconos y así es como agregas fondos.
Hay muchos íconos de dónde escoger en muchas librerías en Internet diferentes afrontados son gratis
otras de paga pero a mí esta es la que más me gusta porque tiene muchas variantes de íconos tiene las
versiones de S BG para agregar a tus diseños y también es gratis.
Vamos a continuar con nuestro proyecto en el próximo video.