如何用 font-awesome 图标替换 png 图标？答案

【问题标题】：How to replace png icon with font-awesome icon?如何用 font-awesome 图标替换 png 图标？
【发布时间】：2018-12-17 10:44:33
【问题描述】：

我想用“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>

【问题讨论】：

添加 cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/…"> 然后引用所需的然后为按钮添加所需的类，例如但将其修改为一个按钮。希望对您有所帮助。

标签： icons font-awesome footer

【解决方案1】：

您需要将 Font Awesome 放入页面的 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，例如。克：

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

【讨论】：

' title='Facebook'/> ??? ?
@mawga_bwoy 不，将<img src='http://i.imgur.com/YFXWd8p.png' title='Facebook'/> 替换为<i class="fab fa-facebook-f"></i>。
非常感谢您！我抓到你了！！
抱歉，它在我的帖子页脚上不起作用，我只能看到正方形！检查它：
@mawga_bwoy 您的代码似乎正确。您是否在页面的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">？

【解决方案2】：

您可以使用下面的代码来包含链接图标。

将图标元素包裹在锚标签内，并将链接详细信息提供给 a 标签。

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

【讨论】：

i.imgur.com/YFXWd8p.png' title='Facebook'/>
像以前一样创建一个标签，并将 标签与来自字体 awsome css 的图标的相应类包含在一起
>