CODEWITHSUNDEEP
htmlcss
V4n1ll4
V4n1ll4

Reputation: 6099

Floating WhatsApp button HTML and CSS

I'm trying to add a floating WhatsApp button to my website by using Kevin Castro's Pen here: https://codepen.io/demoonkevin/pen/MvPEpV

Here is the HTML I am using:

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

Here is the 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;
}

However, there are a couple of issues:

  1. It does not work on mobile? The button doesn't show anywhere on the page...
  2. The whatsapp logo is not white when I insert the code on my page (if you look at the pen above it has a green logo with a white whatsapp in the middle of the icon).

Upvotes: 1

Views: 21434

Answers (4)

user22264707
user22264707

Reputation: 1

If you don't see the whatsapp icon, include below code:

Upvotes: -1

Hassnain
Hassnain

Reputation: 1

Change html font answer icon class in this case this not working new class code is :

Upvotes: 0

Lean Falc&#243;n
Lean Falc&#243;n

Reputation: 11

Just wanted to add that I had the same error.

When I copied the example, it didn't appear in mobile.

But then I just left it there for a month, came back and it worked.

So I guess it was a matter of refreshing the CSS file on the explorer when you make the changes.

Upvotes: 1

Benjamin Barb&#233;
Benjamin Barb&#233;

Reputation: 590

To fix the color issue please add the following css to your my-whatsApp class because the a:visited property override the color

color: white;

In mobile, look like it work when i try from the browser

Upvotes: 1

Related Questions