WhatsApp Icon

How to Add Whatsapp Share Button Using HTML & CSS Code?

In this article, we’ll build a WhatsApp Share Button Using Html and Css Code and add it to our website so that whenever someone clicks on the symbol, the message is shared with the specific person whose number is connected to our WhatsApp API. In this article, we’ll demonstrate how to incorporate a chat feature into our website using APIs. The most popular cross-platform messaging software in the world, WhatsApp, is also one of the most secure methods to contact family and friends that live overseas. End-to-end encryption and free web-based international calling are two of WhatsApp’s well-known increased privacy features. What is an API? Application Programming Interface is referred to as API. The term «application» in the context of APIs refers to any software with a specific function. Interface can be compared to a service agreement between two programmes. This agreement specifies the requests and responses that the two parties will use to communicate. Developers can find instructions in their API documentation on how to format those requests and responses. I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

Step1: Adding HTML Markup

          
WhatsApp Button
 
If you liked this pen, don't forget to heart, share and follow!
    

The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code. In order to incorporate the icons into our project, we also used some icons on our Timeline page, so we needed to include some icon links inside the head part of our HTML.

Adding the Structure for our Whatsapp Icon: To add the WhatsApp icon structure to our website, we will use the fundamental HTML elements. This is a very simple structure; we’ll just add the main heading and then add the WhatsApp icon class inside our body using the font-awesome classes. We will now give our webpage a primary, large heading using the h1 element, and we will add the little description using the p tag. You can follow us on YouTube and Instagram if you appreciate our project and would want to see more of them.
Using the a tag we will add a whatsapp icon class inside our anchor link and inside our href we will add the Whataspp API link.

Step2: Adding CSS Code

html, body < width: 100%; height: 100%; >body < display: flex; flex-direction: column; align-items: center; justify-content: center; align-content: center; background: #00c6ff; /* fallback for old browsers */ background: -webkit-linear-gradient( to right, #0072ff, #00c6ff ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right, #0072ff, #00c6ff ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: "Montserrat", sans-serif; color: #ffffff; >h1 < font-size: 4em; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); >p < text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); >.whatsapp-button < position: fixed; bottom: 15px; right: 15px; z-index: 99; background-color: #25d366; border-radius: 50px; color: #ffffff; text-decoration: none; width: 50px; height: 50px; font-size: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; -webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); animation: effect 5s infinite ease-in; >@keyframes effect < 20%, 100% < width: 50px; height: 50px; font-size: 30px; >0%, 10% < width: 55px; height: 55px; font-size: 35px; >5% < width: 50px; height: 50px; font-size: 30px; >> 

Step1: The width and height of our body will be set to «100%» using the html body element selector. We’ll also use it to set the display to «flex» and centre all of the items using the align item attribute. We’ll add a linear gradient backdrop in shades of blue and light blue using the background attribute. The font colour is set to «white» and the font family is «Montserrat.»

Step2: Using the tag selector (h1), we will now style our HTML elements by setting the font-size to «4 em» and adding a black text shadow to the h1 heading with the text-shadow property. To add text shadows to our paragraph text, we will also use the tag selector (p).

Step3: Now using the class selector (.whatsapp-button) we will set the position as «fixed» and using the bottom property we will leave a 15px space from bottom and right property we will leave space 15px from right.Using the background color property we will set the background as «green» and we have also added a border radius of 50px to add the round shape to our icon. The width and height is set as 50px respecitvely.Using the animate property we will add effect ease-in to our icon. The keyframes rule is now able to provide the animation code by using the keyframe property. A progressive transition from one set of CSS styles to another is used to produce the animation. The collection of CSS styles can be altered repeatedly while the animation is playing.

.whatsapp-button < position: fixed; bottom: 15px; right: 15px; z-index: 99; background-color: #25d366; border-radius: 50px; color: #ffffff; text-decoration: none; width: 50px; height: 50px; font-size: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; -webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); animation: effect 5s infinite ease-in; >@keyframes effect < 20%, 100% < width: 50px; height: 50px; font-size: 30px; >0%, 10% < width: 55px; height: 55px; font-size: 35px; >5% < width: 50px; height: 50px; font-size: 30px; >> 

Now we’ve completed our whatsapp Icon using HTML , CSS . I hope you understood the whole project. Let’s take a look at our Live Preview. Now We have Successfully created our Whatsapp Icon using HTML , CSS. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page. follow : codewithrandom
Written By : Arun
Code By: Jonathan

Источник

Font Awesome whatsapp Icon

Font Awesome WhatsApp Icon refers to an internationally available voice over IP and cross-platform centralized free instant messaging service owned by the American company Meta Platforms. This font awesome icon is also known as «fa-WhatsApp» or «fa fa WhatsApp».

Whatsapp Icon is given below. You can use this icon on the same way in your project. First make sure you have added Font Awesome Icon library. If this library is added just add the HTML css class fa fa-whatsapp to any element to add the icon. Font Awesome whatsapp Icon can be resized as per your need. You can manage size of icon(fa fa whatsapp) by using font-size css style.

You can get steps to add HTML icon Whatsapp in Web, Font Awesome and other framwork.

How to add Font Awesome whatsapp Icon ?

Font Awesome Icon fa fa whatsapp Icon can be added to any web page simply as below.

Fontawesome Version 4.X

whatsapp

whatsapp

whatsapp

whatsapp

whatsapp

You can integrate Icon in web pages by just adding following below syntax & icon code.

HTML Code

Get complete html code for icon whatsapp

Tags

messenger app,send messages, images, audio, video,Voice call,socail media

Font Awesome Icon whatsapp Icon | fa fa whatsapp | HTML, CSS

Adding Font Awesome Icon HTML Whatsapp( fa fa-whatsapp ) in web project is very simple. You need to add the icon class along with material-icons, it is basically main class and mandatory for icons so do not forget to add this class. You can customize Font Awesome Icon whatsapp Icon Whatsapp as per your requirement, suppose that you need to chnage the color of Whatsapp icon or change the size of size. It is pretty simple to change color of icon Whatsapp just add style=»color:red» it will make font color red. On the same way you can change size of Whatsapp icon by just adding style=»font-size:50px;». Smililarly you can add border color, shadow and other font styles to Whatsapp. Hope this icon fullfilled your need. Thanks for visiting us.

Change Font Awesome Icon Icon Whatsapp Color

Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.

Output of the above example will be as below-

Источник

Как поставить иконку WhatsApp на сайт. Три способа

Друзья привет в этом видео я рассказываю как легко установить на сайт иконку для связи по WhatsApp.

Ссылка о которой я говорил в видео
https://faq.whatsapp.com/general/26000030/?lang=ru

Мы рассмотрим 3 способа.

1) При помощи кода выводя в записи или на странице
2) При помощи плагина WhatsApp me
3) При помощи scc поместим плагин в левый нижний угол

Все три способа элементарны и доступны пользователям с любым уровнем опыта. В видео я все очень подробно показываю.

Ранее выходило видео более старое, где я рассказываю не только про иконки Вацапа но и Скайпа Вайбера итд
Вот ссылочка на видео https://youtu.be/bYPEOwtwl58
А вот на страничку с кодом https://e-integrate.ru/kak-dobavit-na-sajt-ikonki-telefona-viber/

Первый варик

Вставляем ее в режиме текстового редактора в любое место на сайте, и не забываем изменить телефон на свой к которому привязан WhatsApp.

Код выше, это код с заранее заполненным сообщением. Вместо закодированного текста вставляем свой код который Вы получите после перекодирования.

Ссылка выше это когда нужно, чтобы посетитель поделился со своими друзьями текстом который вы зарядили. Соответственно текст заранее кодируем и вставляем вместо моего.

Второй вариант

Третий вариант

Код для вставки на сайте, например в футере чтобы показывалось на всех страницах или на любой конкретной странице

Только поменяйте номер и адрес картинки вместо whatsapp-logo.png закиньте адрес своей картинки.

Немного отсебятины

Из опыта. Иконка WhatsApp работает лучше чем любой онлайн консультант. WhatsApp не установлен разве что у динозавров на телефоне. Хоть я сам динозавр но пользуюсь этой приложухой постоянно. Это очень удобно. Можно отправить просто текстовое сообщение, можно сразу позвонить и не отвечать на вопросых онлайн консультанта, типа а как Вас зовут, оставьте емайл, примите условие, поставьте галочку что мы можем налево и направо использовать Вашу персональную информацию. В общем я за иконку WhatsApp, чего и вам желаю!

Пишите в комменты у кого снова не получилось)))

Источник

Whatsapp font awesome icon Usage,CSS Class Name,SVG & CSS Content Code

Whatsapp font awesome icon css class name is fa-whatsapp and CSS Content Code is \f232 .

Whatsapp font awesome icon is part of brands icons.

Table of Contents

Whatsapp font awesome icon usage

We can display Whatsapp font awesome icon using 3 different ways depending upon our requirement.

Whatsapp font awesome icon CSS class name

To display Whatsapp font awesome icon, add predefined class name i.e., fa-whatsapp (with prefix fa- ) to the i tag.

And we need to add corresponding font awesome icon style for the Whatsapp icon.

Whatsapp icon has 1 icon style i.e.,brands. We need to append icon style class fab .

Whatsapp font awesome icon CSS Content Code

We can display Whatsapp font awesome icon using it’s CSS Content Code \f232

Use the following HTML code

 .fontawesomeicon::before < display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; >.Whatsapp::before 

Whatsapp font awesome icon SVG

Use the following icon SVG to display Whatsapp font awesome icon.

Use the following HTML code

This  Whatsapp displayed using SVG
 

Whatsapp displayed using SVG

Change Whatsapp font awesome icon size

To increase Whatsapp font awesome icon size, use the fa-lg(33 % increase) , fa-2x , fa-3x , fa-4x , or fa-5x classes along with icon class \f232. Increase in icon size will be relative to their parent container.

fa-lg 
fa-2x 
fa-3x 
fa-4x 
fa-5x 

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Whatsapp font awesome icon with Fixed Width

All the font awesome icons does not have same width.

For example Whatsapp icon and home icon may not have same height and width.

So to display two icons with fixed width and height we can use fa-fw class.

 Fixed Width Normal 
Fixed Width Normal 

Fixed Width Normal
Fixed Width Normal

Whatsapp font awesome icon Border

To add border to Whatsapp font awesome icon, use fa-border class.

Pull Whatsapp font awesome icon To the left

To pull Whatsapp icon to the left of the container use fa-pull-left class.

 
. The text after Whatsapp Icon will be displayed on the right side of the icon.
 

Pull Whatsapp font awesome icon To the left

To pull Whatsapp icon to the right of the container use fa-pull-right class.

 
. The text after Whatsapp Icon will be displayed on the left side of the icon.
 

Animate Whatsapp font awesome icon

To animate Whatsapp font awesome icon, use fa-spin class.

Animate Whatsapp font awesome icon with steps

While animating the font awesome icon,We can rotate Whatsapp icon in 8 steps instead of uniform rotation.

We can use fa-pulse icon along with fa-spin class.

Rotate Whatsapp font awesome icon

To rotate Whatsapp font awesome icon, Use fa-rotate-x class

Where ‘x’ represents degree of rotation.

 
Rnormal
 
R fa-rotate-90
 
R fa-rotate-180
 
R fa-rotate-270
 
 

Flip Whatsapp font awesome icon

To flip Whatsapp font awesome icon horizontally and vertically use fa-flip-horizontal and fa-flip-vertical classes.

 F Normal 
F fa-flip-horizontal 
F fa-flip-vertical 

Combine Whatsapp font awesome icon with other font awesome icons

In font awesome icons,using stacking we can combine multiple icons and display it as one icon.

To do that use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.

And use class fa-inverse for an alternative icon color.

In the below example, I am displaying Whatsapp font awesome icon on top of icons like fa-square , fa-circle and fa-ban .

And used fa-inverse in the second example to invert the color of the icon.

 
Whatsapp on fa-square 
Whatsapp on fa-circle 
Whatsapp on fa-ban
 

Источник