Question

我想用“ font-awesome”替换下面代码中的“ PNG”图标吗？有人可以帮我替补吗？

<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/YFXWd8p.png' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/GyqTR6Z.png' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/m6DKSKK.png' title='G+'/></a>

Answer 1

您可以使用以下代码在链接中添加图标。

将图标元素包裹在锚标记内，并提供指向该标记的链接详细信息。

<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>

这将是您的代码

 <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><i class="fa fa-facebook"></i>></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class="fa fa-twitter"></i></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><i class="fa fa fa-google-plus"></i></a>

Answer 2

您需要通过将其添加到页面的head标记中来在页面中包含“真棒字体”：

<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='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><i class="fab fa-facebook-f"></i></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class="fab fa-twitter"></i></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><i class="fab fa-google-plus-g"></i></a>

要从Font Awesome中获取图标，只需搜索其page并包含其HTML，例如e。 g：

<i class="fab fa-facebook-f"></i>

如何用真棒字体图标替换png图标？

2 个答案: