How to replace png icon with font-awesome icon?
Question
I'd like to replace the "PNG" icons in the code below with "font-awesome"? Can someone help, making the replacement for me?
<!-- share buttons -->
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><img src='http://i.imgur.com/YFXWd8p.png' title='Facebook'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img src='http://i.imgur.com/GyqTR6Z.png' title='Twitter'/></a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img src='http://i.imgur.com/m6DKSKK.png' title='G+'/></a>
2 answers
solution1
0 2018-12-17 10:49:06
You can use the below code to include icon for links.
Wrap the icon element inside the anchor tag and provide the link details to the a tag.
<html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1>fa fa-address-book</h1> <a href="https://jsfiddle.net/"><i class="fa fa-facebook"></i></a> <a href="https://jsfiddle.net/"><i class="fa fa-twitter"></i></a> <a href="https://jsfiddle.net/"><i class="fa fa fa-google-plus"></i></a> </body> </html>
This will be your code
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><i class="fa fa-facebook"></i>></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><i class="fa fa-twitter"></i></a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><i class="fa fa fa-google-plus"></i></a>
solution2
0 2018-12-17 10:55:40
You will need to include Font Awesome to your page by placing it inside your head tag of your page:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Include Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><i class="fab fa-facebook-f"></i></a> <a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><i class="fab fa-twitter"></i></a> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><i class="fab fa-google-plus-g"></i></a>
To get an icon from Font Awesome, simply search on their page and include their HTML, e. g:
<i class="fab fa-facebook-f"></i>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.