Fontawesome 5 CDN códigos de ejemplos

Fontawesome 5 CDN. En este articulo dejare varias versiones de CDN de esta librería de iconos que puedes integrar en tu web en unos cortos pasos. Recuerda que esta librería nos brindara el servicio de iconos en nuestra página web o sistema web dándole una interfaz profesional.

¡Código de incrustación CDN de Font Awesome!

Para gozar de los iconos para integrar nuestra web debemos de agregar cualquiera de este link de tipo CSS o JS, obviamente debemos de elegir la versión adecuada. Sin embargo, recuerda que mientras más alta sea la versión habrá más iconos para escoger.

¡Pon tus íconos en funcionamiento en solo 3 pasos!

  • Copie su código y colóquelo cerca de la parte superior del <head> de su HTML
  • Use cualquiera de los íconos de Font Awesome 605+ en la interfaz de usuario de su proyecto
  • Registre su cuenta CDN de Font Awesome para activar funciones más impresionantes

Versiones de CDN FontAwesome

Fontawesome 4.7 CDN

Para poder usar iconos en la versión 4.7 debemos de integrar este script en las cabeceras de nuestro archivo HTML, PHP u otro archivo que estes ejecutando.

<script src="https://use.fontawesome.com/3970c96bbf.js"></script>

Si no deseas hacerte lio, puedes usar también este archivo CDN de CSS servido por cloudflare e integrarlo en la cabecera de tu web.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Aqui te dejo de cdn brindado por bootstrap

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

Font awesome 5 pro cdn link

<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
// En  kit
<script src="https://kit.fontawesome.com/a33530bb41.js" crossorigin="anonymous"></script>

//Agregar cdn
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

CDN FONT AWESOME V6.1.1

La compañía número uno en CDN como ser cloudflare tiene un servicio de brindar CDN para librerías especificas con ser el caso de Fontawesome, en esta oportunidad de dejaré él CDN de esta última versión.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

¿Como integrar FONTAWESOME CDN?

El uso de esta librería es muy simple y su curva de aprendizaje es muy baja porque solo debemos de integrar dentro de nuestros archivos una línea de código, específicamente dentro de la etiqueta <head>…</head>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

</body>
</html>

Conclusión

Podemos gozar de miles de iconos por ejemplo de categorías como ser: usuarios, email, shopping carta, flechas, etc. y cada día van aumentando más iconos.

Además, podemos obtener el paquete de archivos de esta librería, pero debemos integrar correctamente las rutas de la librería.

Por último, darles de conocer que existen varias librerías similares que brindan este servicio, veamos algunas alternativas.

Alternativas a FONTAWESOME

  • Fontello.- Herramienta para crear fuentes personalizadas con iconos.
    Flaticon.- La base de datos más grande de iconos gratuitos disponibles en los formatos PNG, SVG, EPS, PSD y BASE 64.
  • IconPharm.- Iconpharm es una biblioteca de iconos de código abierto. El sitio web recopila íconos: Font Awesome, Iconic, Linecons, Maki, etc. Por lo tanto, Iconpharm también ofrece herramientas para recolorear, redimensionar, convertir íconos.
  • Icons8.- Icons8 es una colección de iconos creados por un solo equipo. Las ideas para los íconos son de la comunidad.
  • Iconspedia.- Descarga los iconos png gratuitos y amp; Paquetes de iconos | IconsPedia. Busque y encuentre iconos y paquetes de iconos por categorías, búsqueda individual.
  • The Noun Project.- Creando, compartiendo y celebrando el lenguaje visual del mundo The Noun Project está construyendo un lenguaje visual global que todos puedan entender.
  • Line Awesome.- Un solo archivo que reemplaza a Font Awesome con íconos de líneas modernas

Referencia:

MejorSoftware

fontawesome.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio