Whatsapp Share Button не работает, как это исправить?

Question

Я использую HTML-код вместо плагинов, чтобы уменьшить нагрузку на веб-сайт при открытии в браузере. Этот код работает на блоггере, но не на моем веб-сайте на основе CMS из WordPress.

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

С этим кодом я могу получить только кнопку без удивительного шрифта fa fa whatsapp.

Вы можете увидеть результаты здесь https://www.dewiswedding.com

Пожалуйста, помогите мне решить эту проблему ..

Answer 1

Поскольку вы не добавляете удивительный шрифт на свой сайт,

Вставить в заголовок тега:

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

Answer 2

Попробуйте этот ответ. Я думаю, что он полезен для вас.

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

Answer 3

Ваш сайт ничего не загружает из Font Awesome. Похоже, вы загружаете собственный шрифт из IcoMoon, поэтому класс "fa" ничего не сделает.

Либо используйте значок WhatsApp из IcoMoon, либо загрузите шрифт awesome либо локально, либо из CDN