Iconos y fuentes de PixelPay

Uso y recomendaciones

En este paquete se encuentran 3 tipos de fuentes:

• Poppins (PixelPay fuente base del UI)
• Icons (Coleccion de iconos del UI)
• Logos (Marcas, sellos y logos)
• Social (Logos e iconos de redes sociales)

Para poder ser utilizados deben de incluirse las hojas de estilo en la etiqueta <head/> via CDN de la siguiente forma:

...

<!-- Base Font -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@pixelpay/fonts/dist/poppins.css" />

<!-- Icons Font -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@pixelpay/fonts/dist/logos.css" />

<!-- Logos Font -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@pixelpay/fonts/dist/icons.css" />

<!-- Social Font -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@pixelpay/fonts/dist/social.css" />

...

o tambien puede ser incluido en cualquier proyecto de javascript incluyendolo asi:

// Import support
import '@pixelpay/fonts/dist/poppins.css';
import '@pixelpay/fonts/dist/icons.css';
import '@pixelpay/fonts/dist/logos.css';
import '@pixelpay/fonts/dist/social.css';

/* --- or --- */

// Require support
require('@pixelpay/fonts/dist/poppins.css');
require('@pixelpay/fonts/dist/icons.css');
require('@pixelpay/fonts/dist/logos.css');
require('@pixelpay/fonts/dist/social.css');

Para poder utilizar la fuente Poppins debera de definir la propiedad css font-family en el elemento que se desee:

body {
	font-family: 'Poppins', 'Arial', sans-serif;
}

Para poder utilizar la fuente icons puede visualizar la lista de códigos aquí y agregarlo como clase en la etiqueta <i/> con el prefijo icon- de la siguiente forma:

<!-- example -->
<i class="icon-plus"></i>

Para poder utilizar la fuente logos puede visualizar la lista de códigos aquí y agregarlo como clase en la etiqueta <i/> con el prefijo logo- de la siguiente forma:

<!-- example -->
<i class="logo-pixelpay"></i>

Para poder utilizar la fuente social puede visualizar la lista de códigos aquí y agregarlo como clase en la etiqueta <i/> con el prefijo social- de la siguiente forma:

<!-- example -->
<i class="social-facebook"></i>