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

Asked

Viewed 895 times

0

How to change the font from "Regular Icons" to "Solid Icons" via CSS. No https://fontawesome.com/cheatsheet 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>

html5 css3 font-awesome

  • So in case it would be ideal for you to work with direct font, without using the font-awesome classes, you can use the a content content in css, and specify the font as the font-awesome. There in the detail view of the icon you have selected, it has a specific icon code, the version 5 documentation is great, it is worth taking a look!

  • What you indicate, I have already done, and it is in the question code. The two codes are the same. how do I change the presentation? I need help level Hard. :D

  • I’ve made both representations clearer.

  • Guy with :before is impossible by what I’ve been reading... When you try to change the font-family: "Font Awesome 5 Regular"; for font-family: "Font Awesome 5 Solid"; it does not load the font gets only one square... If you notice in Dev Tools the icon is already one ::before and there’s no way to have a ::before::before The solution would be using the <i> If you want I will answer you with more details in the field of Answer

  • Hello @hugocsl if possible I would like the answer yes.

1 answer

1


Follow an alternative without using ::before because the new standard of https://fontawesome.com/ already puts the icon as a ::before and there’s no way you can make a ::before::before

Here is the official documentation on the use of ::before in the new slab: https://fontawesome.com/how-to-use/svg-with-js#pseudo-Elements

Now let’s get to the point, To do what you want just follow the structure of HTML and put in <i> the class white or black to show and hide icons on :hover giving the effect 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>

Browser other questions tagged html5 css3 font-awesome

You are not signed in. Login or sign up in order to post.