Tengo un problema con font awesome, no me deja editar los iconos, no puedo ni cambiarle el color ni el tamaño, pero si se muestran los iconos en la pagina, intente llamando en la hoja de estilos con la i, con la clases fas y far, le puse una clase personalizada y nada, los iconos los tengo dentro de un h3, solo los puedo editar si cambio el h3, pero si saco a fuera los iconos tampoco me deja editarlos.
Ya no se que mas hacer, he intentado todo pero nada, lo peor de todo que es que ya los habia editado y ahora ya no me deja. Mi pagina esta hecha con bootstrap, quizas sea por eso que no me deja cambiarlo.
este es el codigo de mi pagina:
Colores: Azul primario = #1FA2FF, Azul secundario = #12D8FA, Verde = #A6FFCB
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: url('stripe2.jpg') no-repeat center fixed;
background-size: cover;
font-family: 'Helvetica';
color: #12D8FA;
}
header{
margin-bottom: 20px;
}
main{
width: 80%;
background: #fff;
margin: auto;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
section{
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin: 25px;
padding: 20px;
}
h2{
font-size: 30px;
font-weight: 600;
text-align: center;
}
footer{
background: #1FA2FF;
color: #fff;
margin-top: 20px;
padding: 15px;
}
/*____________________Menu_____________________*/
.menu{
background: rgba(31, 162, 255, 1);
box-shadow: 5px 0px 10px rgba(31, 162, 255, 0.1);
opacity: 0.85;
transition: 0.5s;
}
.menu:hover{
opacity: 1;
}
.menu a{
color: #fff;
font-weight: lighter;
transition: 0.3s;
}
.menu a:hover{
color: #A6FFCB;
font-weight: bold;
}
/*______________Cabecera:_Titulos__________________*/
header #titulos{
height: 500px;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
#titulos h1{
text-align: center;
font-size: 55px;
margin: 5px;
color: #fff;
text-shadow: 0px 0px 10px #12D8FA;
}
#titulos h2{
text-align: center;
font-size: 35px;
margin: 5px;
color: #fff;
text-shadow: 0px 0px 10px #12D8FA;
}
#titulos .btn{
background: #1FA2FF;
color: #fff;
box-shadow: 0px 0px 10px #12D8FA;
font-weight: lighter;
font-size: 25px;
transition: 0.5s;
}
#titulos .btn:hover{
border: 2px solid rgba(166, 255, 203, 0.8);
box-shadow: 0px 0px 5px rgba(166, 255, 203, 0.8);
color: rgba(166, 255, 203, 0.8);
border-radius: 25px;
font-size: 30px;
font-weight: bold;
}
/*________________Cabecera:_Beneficios___________________*/
header #benefits{
background: rgba(166, 255, 203, 0.25);
height: 135px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
box-shadow: 5px 0px 10px rgba(166, 255, 203, 0.25);
}
#benefits h3{
font-size: 22px;
font-weight: 600;
margin: auto;
color: #fff;
}
#benefits .far, #benefits .fas{
font-size: 100px;
margin: auto;
color: #000;
padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AltsShop | Venta de Cuentas de Netflix, Minecraft y Spotify</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x ua-compatible" content="ie-edge">
<link rel="stylesheet" type="text/css" href="bootstrapp/css/bootstrap.css">
<script defer src="fontawesome/css/all.css"></script> <!--load all styles -->
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header>
<nav class="menu navbar navbar-expand fixed-top justify-content-end">
<ul class="navbar-nav">
<li class="nav-item"><a href="" class="nav-link"><i class="fas fa-book-open"></i> Instrucciones</a></li>
<li class="nav-item"><a href="" class="nav-link"><i class="fas fa-file-invoice-dollar"></i> Precios</a></li>
<li class="nav-item"><a href="" class="nav-link"><i class="fas fa-question-circle"></i> Fag</a></li>
</ul>
</nav>
<div id="titulos" class="container-fluid">
<h1 class="font-weight-bold">AltsShop</h1>
<h2>Cuentas de Netflix, Minecraft y Spotify a un precio economico</h2><br>
<a href="#comprar" class="btn btn-lg btn-outline">Compra tu Cuenta</a>
</div>
<div id="benefits" class="container-fluid">
<div class="row">
<div class="col-3">
<h3><i class="fas fa-hand-holding-usd"></i><br>Ahorro del 50%</h3>
</div>
<div class="col-3">
<h3><i class="far fa-check-square"></i><br>Garantía en caso de algun fallo</h3>
</div>
<div class="col-3">
<h3><i class="fas fa-headset"></i><br>Atencion personalizada 24/7</h3>
</div>
<div class="col-3">
<h3><i class="far fa-paper-plane"></i><br>Entrega inmediata</h3>
</div>
</div>
</div>
</header>