Ok, so I think I misunderstood you in the beginning. My apologies…
My previous post was not very good information now that I realize that “Font Awesome” is a CSS library for adding custom icons by using <i></i> tags for the SVG icon placement, properties, class, etc.
So I downloaded the free package from Hosting Font Awesome Yourself and set it up in my www directory of my WAMP setup to test it.
I configured a test HTML page with:
<head>
<link href="./css/fontawesome.css" rel="stylesheet">
<link href="./css/brands.css" rel="stylesheet">
<link href="./css/solid.css" rel="stylesheet">
<link href="./css/all.css" rel="stylesheet">
<link href="./css/mystyles.css" rel="stylesheet">
<script defer src="./js/all.js"></script>
<script defer src="./js/brands.js"></script>
<script defer src="./js/solid.js"></script>
<script defer src="./js/fontawesome.js"></script>
</head>
to import all the dependencies (without worrying about something missing) and then got the shape to work properly.
then I made my own "mystyles.css" style sheet which imported above… so I could add some additional CSS and override some of the "Font Awesome" defaults without having to mess with their "all.css" file.
so in my custom "mystyles.css" file I have this:
body {
}
h1 {
color: navy;
margin-left: 20px;
}
.position-heart-1 {
font-size: 2em;
}
.fa-heart:hover::after {
opacity: 1;
color: #ff79da;
}
.fa-heart::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #ff79da;
opacity: 0;
}
.fa-heart {
cursor: pointer;
color: #9356dc;
}
.color-trasition-hover {
color: /* #ff79da; */ #9356dc;
transition: color 5000ms;
}
.color-trasition-hover:hover {
color: #ff79da;
}
and in the "HTML" file, I have this…
</html>
<head>
<link href="./css/fontawesome.css" rel="stylesheet">
<link href="./css/brands.css" rel="stylesheet">
<link href="./css/solid.css" rel="stylesheet">
<link href="./css/all.css" rel="stylesheet">
<link href="./css/mystyles.css" rel="stylesheet">
<script defer src="./js/all.js"></script>
<script defer src="./js/brands.js"></script>
<script defer src="./js/solid.js"></script>
<script defer src="./js/fontawesome.js"></script>
<title>
</title>
</head>
</style>
<body>
<h3></h3>
<div>
<p class="paragraph"></p>
<div class="position-icon">
<div class="position-heart-1">
<i class="fas fa-heart fa-2x color-trasition-hover"></i>
</div>
</div>
</div>
</body>
</html>
I added another class to the tag:
<i class="fas fa-heart fa-2x color-transition-hover"></i>
so now I get this when I load the page and hover over it…
slowly transitions to this…
I am not really familiar with the “Font Awesome” product. They have some documentation at their site Basic Use , with links to other topics at the right of that page .
The gradient color is not working for me. I looked at their site, and saw information about animations and things, but I did not find anything about using gradient colors.
I did get it working with a transition from a single solid color to another single solid color, as you can see in the screenshot. It transitions from that purple to pink on mouse hover. Then back to purple after moving the mouse away.
So this will take more research.
Sorry, for the long post (because of the screenshots and code).
I understand 
I will edit that reply to save confusion.
