Awesome fonts: how to change the font in a: hover via CSS?

Navigation
1

How to change the font from "Regular Icons" to "Solid Icons" via CSS. In link both have the same code. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
a#edit{
    color: #f00;
    text-decoration: none;
    background-color: none;
}
a#edit:link::before{
   font-family: FontAwesome;
   content:"\f1c6 ";
   }
a#edit:hover{
    color: #000;
    text-decoration: none;
    background-color: none;
}

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph. 
</p><p> <a id="edit" href="#"> </a>
</p><p> <a href="#">.</a>
</p><p> <i class="fas fa-file-archive"> f1c6 </i>
</p><p> <i class="far fa-file-archive"> f1c6 </i>
</p>

</body>
</html>
    
asked by anonymous 01.02.2018 / 15:12

1 answer

0

Here's an alternative without using ::before because the new default link already places the icon as a ::before and there's no way you can make a ::before::before

Here is the official documentation on using ::before in the new default: link

Now let's get down to business, To do what you want, just follow the HTML structure and put the and black to show and hide the icons in <i> giving the effect that I believe you want.

See in the Snippet below that you will understand better. 

.icone {
    position: relative;
    cursor: pointer;
}
.branco{
    position: relative;
    color: red;
}
.preto {
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
}
.icone:hover .preto {
    color: black;
}
.icone:hover .branco {
    color: transparent;
}
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">


<span class="icone">
    <i class="far fa-file-archive branco"></i>
    <i class="fas fa-file-archive preto" ></i> 
    f1c6 
</span>
<br><br>
<span class="icone">
    <i class="far fa-address-book branco"></i>
    <i class="fas fa-address-book preto" ></i> 
    f2b9 
</span>
    
06.02.2018 / 15:14
Doubt ~ beginner on 2 android SDK's on the same pc The data is not registered in the database, but it appears that the registration was successful [closed]