me podrian ayudar acerca de las fuentes.
- En la primera imagen que tiene el icono y margenes anaranjados, se muestra sin pasar o poner el mouse en el icono.
- En la segunda imagen que tiene el icono blanco con un fondo anaranjado, eso muestra cuando esta activado (cuando paso o pongo el mouse sobre el icono).
Pregunta: ¿Cómo puedo hacer para que se active el icono de la foto 2 tal solo pasar el mouse por el cuadro sin necesidad de tocar exactamente el icono para que cambie de color?
Solo quiero que la fuente de icono se active (cambie de fuente como la foto 2) tan solo pasar el mouse por el cuadro que contiene el icono y el texto.
.button{
margin: 10px 80px;
display:block;
text-decoration: none;
color: #ffa500;
border: 1px solid #333;
}
.fx-sb {
margin-left: 144px;
}
.list{
width: 0px;
display: flex;
margin: 90px 0px;
}
.button {
display: flex;
position:relative;
line-height: 27px;
}
.icon:hover{
background: #ffa500;
color:white;
}
.list [class*="icon"]:before {
position:relative;
bottom: -13px;
margin-left: 16px;
}
.icon {
margin-right: 350px;
margin-left: 20px;
text-align: center;
font-size: 30px;
width: 60px;
height: 60px;
position:relative;
margin-top: 10px;
margin-bottom: 10px;
border: 3px solid #ffa500;
}
.description {
position:absolute;
text-align: left;
margin-left: 120px;
color: rgb(150, 148, 148);
}
.titulo {
font-size: 22px;
text-transform:uppercase;
font-family: "Merri";
color: rgb(66, 65, 62, .9);
font-weight: 600;
}
.parraf{
font-size: 18px;
font-family: "Arimo";
}
<div class="list">
<div class="fx-sb">
<tr class="servicios">
<div href="" class="button">
<div class="icon icon-hotel">
<img url="CSS/fontello.css">
</div>
<div class="description">
<h9 class="titulo">Alojamiento</h9>
<p class="parraf">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</tr>
</div>
</div>