html - float WhatsApp 按钮 HTML 和 CSS

Question

我正在尝试使用 Kevin Castro 的 Pen 在我的网站上添加一个 float 的 WhatsApp 按钮:https://codepen.io/demoonkevin/pen/MvPEpV

这是我正在使用的 HTML:

<a href="https://api.whatsapp.com/send?phone=12345&text=&source=&data=" class="whatsApp" target="_blank"><i class="fa fa-whatsapp my-whatsApp"></i></a>

这是 CSS:

/* WhatsApp Button */

.whatsApp{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    left:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
}
.my-whatsApp{
    margin-top:16px;
}

但是，有几个问题:

1. 它在移动设备上不起作用？该按钮未显示在页面上的任何位置...
2. 当我在我的页面上插入代码时，whatsapp Logo 不是白色的(如果你看上面的笔，它有一个绿色 Logo ，图标中间有一个白色 whatsapp)。

Answer 1

要解决颜色问题，请将以下 css 添加到您的 my-whatsApp 类中，因为 a:visited 属性会覆盖颜色

color: white;

在移动设备上，当我从浏览器尝试时看起来它可以工作