Question

在浏览器中打开网站时，我使用html代码而不是插件来减轻网站的负担。这段代码适用于Blogger，但不适用于基于wordpress CMS的我的网站。

<style>.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:20px;
	left:20px;
	background:green;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.my-float{
	margin-top:16px;
}</style>

<a href="https://api.whatsapp.com/send?phone=+xxxxxxxxxx&text=Hai%20Dewi's%20Wedding%20%21." class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>

使用此代码，我只能得到一个按钮，而无法使用whatsapp的真棒字体。

您可以在https://www.dewiswedding.com

看到结果

请帮助我解决这个问题。

Answer 1

因为您没有在网站上添加超棒的字体，

插入head标签：

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Answer 2

您的网站未从Font Awesome中加载任何内容。看来您正在从IcoMoon加载自定义字体，因此“ fa”类不会执行任何操作。

要么使用IcoMoon的whatsapp图标，要么从本地或从CDN加载真棒字体

Answer 3

尝试这个答案，我认为这个对您有用。

.float {
	position: fixed;
	width:60px;
	height:60px;
	bottom:20px;
	left:20px;
	background: green;
	color: #ffffff;
	border-radius:50px;
	text-align:center;
  font-size: 30px;
	box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.1);
}
.my-float {
	margin-top:15px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="https://api.whatsapp.com/send?phone=+xxxxxxxxxx&text=Hai%20Dewi's%20Wedding%20%21." class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>

Whatsapp共享按钮不起作用，如何解决？

3 个答案: