Tarea-Font-Awesome-Google

Desarrollo Web

•

UTAGS

0

Pilar

4/8/2023

¡Estudia con miles de materiales!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Desarrollo Web

6949 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Materia: Desarrollo Web
TICASI
20/07/2018
Font Awesome
¿Qué es?
Font awesome es un paquete/libreria de iconos completos y vectoriales que se pueden personalizar por tamaño, color y cualquier atributo que se pueda cambiar con CSS, este se puede usar fácilmente en un proyecto y se integra bien con el framework.
¿Cómo se usa?
Se usa mediante el uso de Font-face de CSS3 y la etiqueta HTML5 , este te da acceso a muchos iconos a escala.
Su uso está preparado para que funcione y se fusione fácilmente con el framework Bootstrap, pero se puede usar esta fuente en otros proyectos que se desligan de este.
¿Cómo se implementa?
Para usarlo es necesario descargar el paquete de la pagina oficial, se extraen los archivos, copiamos el contenido de la carpeta /font y los archivos de la carpeta /css a un directorio de nuestro sitio.
Modificamos la ruta donde se encuentra la fuente font-awesome:
Copiar y pegar esta línea de código dentro de la etiqueta <head> de nuestro html, poniendo la ruta correcta al archivo .css que se indica.
<link rel=”stylesheet” href=”tucarpeta/css/font-awesome.min.css“>
Para agregar uno es necesario ver todos los ejemplos que ofrece Font Awesome.
Aplicamos un estilo a nuestro elemento HTML con el icono que deseemos mostrar :
Ejemplo:
Google Fonts
¿Qué es?
Google Fonts es un directorio interactivo de letras, gratuito y estandarizados. Las fuentes de Google están diseñadas para proporcionar una plataforma gratuita para usuarios con el fin de descubrir y utilizar nuevas fuentes, ya que hay veces que en nuestros editores solo están establecidas unas cuantas.
¿Cómo se usa/implementa?
Navega a www.google.com/fonts y busca la fuente deseada. Haz clic en el botón azul Agregar a la colección en el lado derecho de la fuente.
Tu colección se mostrará en la parte inferior de la pantalla. Cuando la veas, selecciona el botón Usar en la parte inferior derecha de la pantalla.
Después de hacer clic en Usar, desplázate hacia abajo hasta el Paso 3, selecciona la pestaña @import y copia el script proporcionado por Google; por ejemplo @import url(http://fonts.googleapis.com/css?family=Open+Sans);
Una vez que hayas copiado este código, puedes regresar a HubSpot para aplicar la fuente de Google Font.
Aplicar una fuente de Google Font a las páginas de destino del COS de HubSpot
Busca la hoja de estilo que se está aplicando a tus páginas. Puedes encontrar tu hoja de estilos en Contenido > Administrador de diseño.
Pega el código @import en la primera línea de tu archivo CSS. Debe estar en la primera línea para que pueda cargar la fuente.
Además, asegúrate de quitar http: del script; al hacerlo, permitirás que la fuente cargue mientras se obtiene una vista previa de una página de destino de HubSpot. Cuando ya hayas pegado el script, haz clic en Guardar cambios.
Ahora que has insertado tu fuente de Google Font en tu archivo CSS, puedes llamar a eso familia de la fuente como una propiedad CSS a través de su código. En otras palabras, dentro de tu hoja de estilos CSS personalizada, aplica la fuente de Google Font en cualquier selector de CSS deseado, tal como se muestra a continuación. Asegúrate de establecer, dentro de tus selectores de CSS, la familia de fuentes para poder utilizar la fuente de Google Font.
Ejemplo: