Social icons code

So in the article pasted below I have added social icons through code.
https://valuetrendsblog.com/2020/01/why-amazon-could-soar/

In the file editor I added this code:

— Add icon library —

>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

In CSS I added this code:

/* Style all font awesome icons */
.fa {
  padding: 10px;
  font-size: 30px;
  width: 35px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
} 

/* Pinterest */
.fa-pinterest {
  background: #cb2027;
  color: white;
}

Now, is it possible to make them appear between the headline and the bread text somehow without edit single posts in the editor? On what row should I insert them in the file editor in that case?

Also, how can I make them have “share” and “like” attributes? Right now when readers click them they are not directed to these platforms(facebook, pinterest and twitter) at all. But it is not an automatical like, share or tweet alternative when they hover or click it.

Is it possible to make it so that when readers hover the symbol, a scroll down list appears for facebook with two alternatives: Either “like” or “share”.
.
And for the twitter button: Either “tweet” or “follow”

For Pinterest: “Pin it”

• This topic was modified 6 years, 4 months ago by Sitebuilder.
• This topic was modified 6 years, 4 months ago by Steven Stern (sterndata).
• This topic was modified 6 years, 4 months ago by Steven Stern (sterndata).