CSS to Custom Arrows to Slick Slider

custom-styles.css

/* ===========================================================================
 	Custom Arrows Slick
   ===========================================================================*/
/*
 * Arrow Boxes - cajas de las flechas < >, 
*  puedes jugar con el border-radius,
 * color de fondo, tamaño de la caja, etc 
 */

	.custom-arrow > .slick-prev, .custom-arrow > .slick-next {
	position: absolute;
	display: block;
	height: 40px;
	width: 40px;
	line-height: 0;
	font-size: 0;
	cursor: pointer;
	background:transparent;
	color: transparent;
	top: 40%;
	margin-top: -10px;
	padding-bottom:0;
	border: none;
	outline: none;
}

/*
 * Al pasar el mouse sobre las flechas
 */

.custom-arrow > .slick-prev:hover, .custom-arrow > .slick-next:hover {
	
	background-color:transparent;
}
.custom-arrow > .slick-prev:focus, .custom-arrow > .slick-next:focus {
	outline: none;
	background-color:transparent;
}
.custom-arrow > .slick-prev.slick-disabled:before, .custom-arrow > .slick-next.slick-disabled:before {
	opacity: 0.10;
}

/*
 * The magic - La magia
 * 1) cambiamos la font-family en este caso a FontAwesome
 * 2) Ajustamos el font-size, color, opacity
 *  
 */

.custom-arrow > .slick-prev:before, .custom-arrow > .slick-next:before {
	font-family: "FontAwesome";
	font-size: 50px;
	line-height: 1;
	color: #000;
	opacity: 0.90;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.custom-arrow > .slick-prev {
	left: 0px;
}
/*
 * New Char Code - Asignamos el nuevo codigo de caracter
 * Left
 */
.custom-arrow > .slick-prev:before {
	content: "\f104";
}

.custom-arrow > .slick-next {
	right: 0px;
}
/*
 * New Char Code - Asignamos el nuevo codigo de caracter
 * Right
 */
.custom-arrow > .slick-next:before {
	content: "\f105";
}

/*
 * Done
 */