在我的网站上左侧制作固定的WhatsApp图标

Question

我有一个网站，想在屏幕左侧添加一个WhatsApp图标，如下图所示：

以下是添加WhatsApp图标的html代码：

<a  class="whats-app" href="#" target="_blank">
    <i class="fa fa-whatsapp my-float"></i>
</a>

这是我使用的css样式

.whats-app {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 15px;
    background-color: #25d366;
    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;
}

从上面的css和html可以得到以下结果：。在css中，我将left:15px 改成了 right:15px 但仍然是第二张图片。

请问我错在哪里？

虽然我已经对上述的css进行了注释，但控制台仍显示Whatsapp图标和css属性。

- Hemavathi B V

---

现在的问题是什么？您想将其与箭头按钮对齐吗？ - Karim Aljandali

你能创建一个 StackBlitz 示例吗？ - Cpt Kitkat

Answer 1

尝试使用这个 CSS。

.whats-app {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 3px 4px 3px #999;
    left: 15px;
    z-index: 100;
}

.my-float {
    margin-top: 10px;
}

- Krupal Panchal

---

我尝试添加 left: 15px; 但是在控制台中没有变化，它仍然显示第一个CSS属性。 - Hemavathi B V

@KrupalPanchal 尝试清除缓存并进行硬重载。 - Kundan

@Hemavathi 如果您不编写 right 属性，则它会自动向左移动。 - Krupal Panchal

直截了当。如果你移除 left: 15px; 并将其改为 right: 15px;，它将被固定在右侧。 - Ariel M.

Answer 2

你需要在 .whats-app 的 css 中添加 left: 0 或者 left: (你想要的像素值)，并且需要从 css 中移除 right: 15px。

尝试一下，希望能对你有所帮助。

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

.my-float {
    margin-top: 16px;
}

<a  class="whats-app" href="#" target="_blank">
    <i class="fa fa-whatsapp my-float"></i>
</a>

- Nirav Joshi

---

如果在右值之前添加左值，则只会显示右值。因此，您应该取消设置右值。 - Ranjith v

@Ranjithv那问题是什么？因为我已经删除了right: 15px。 - Nirav Joshi

Answer 3

您可以像下面的代码一样做些事情：

 .icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
} 

.icon-bar a {
  display: block;
  padding: 16px;
  color: #448edd;
  border-radius: 50px;
}
.whatsapp {
  background: #53d365;
  color: #448edd;
}

<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">
<div class="icon-bar">
  <a href="#" class="whatsapp"><i class="fa fa-whatsapp"></i></a> 
</div>

- Pushprajsinh Chudasama

Answer 4

尝试这个... 这里我取消了右值

css

.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
left:0;
right:unset;
background-color: #25d366;
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;
}

- Ranjith v