Значок whatsapp в html

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
 

Источник

WhatsApp кнопка для сайта с анимацией

Сегодня разберем, как сделать красивую анимированную кнопку для связи по WhatsApp прямо с сайта. Делать мы это будем без плагинов, только при помощи CSS. Поэтому данный способ подойдёт для любого сайта. Ну а разбирать мы всё это будем, конечно же, на примере самой популярной CMS WordPress.

Ссылка для перехода в Whatsapp

Для начала рассмотрим, как выглядит ссылка на чат в Whatsapp для сайта.

А вот она в виде HTML кода:

Вместо phone=79260000000 вставляем нужный номер

Этот код можно вставить в любом месте, как простую ссылку. Добавив к нему соответствующие стили, можно сделать с помощью этого кода обычную или фиксированную кнопку. Чем мы сейчас и займёмся.

Кнопка Whatsapp в углу экрана с анимацией

Первый вариант кнопки whatsapp для сайта делается довольно просто и её легко отредактировать, если вам понадобится поменять цвет или размеры.

Для создания нашей кнопки, мы будем использовать иконку Font Awesome. Для этого ваш шаблон должен поддерживать данный шрифт. Если нет, то необходимо его подключить. Если вы не знаете, как это сделать, то можно воспользоваться плагином Font Awesome — он автоматически подключит библиотеку иконок.

.whatsapp-button < position: fixed; right: 13px; bottom: 90px; transform: translate(-50%, -50%); background: #25D366; /*цвет кнопки*/ border-radius: 50%; width: 55px; /*ширина кнопки*/ height: 55px; /*высота кнопки*/ color: #fff; text-align: center; line-height: 53px; /*центровка иконки в кнопке*/ font-size: 35px; /*размер иконки*/ z-index: 9999; >.whatsapp-button a < color: #fff; >.whatsapp-button:before, .whatsapp-button:after < content: " "; display: block; position: absolute; border: 50%; border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/ left: -20px; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: animate 1.5s linear infinite; opacity: 0; backface-visibility: hidden; >.whatsapp-button:after < animation-delay: .5s; >@keyframes animate < 0% < transform: scale(0.5); opacity: 0; >50% < opacity: 1; >100% < transform: scale(1.2); opacity: 0; >>

CSS для мобильной версии сайта:

Если вам необходимо поменять местоположение кнопки на мобильных устройствах, то добавьте к стилям CSS следующий код.

Кнопка Whatsapp — вариант 2

Данная кнопка имеет более сложную анимацию и эффект появления надписи при наведении.

.whatsapp-button < background: #25D366; border: 3px solid #1cc15a; border-radius: 50%; box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6); cursor: pointer; height: 68px; text-align: center; width: 68px; position: fixed; right: 5%; bottom: 8%; z-index: 9999; transition: .3s; -webkit-animation: hoverWave linear 1s infinite; animation: hoverWave linear 1s infinite; >.whatsapp-button .text-button < height:68px; width:68px; border-radius:50%; position:relative; overflow:hidden; >.whatsapp-button .text-button span < text-align: center; color:#23a455; opacity: 0; font-size: 0; position:absolute; right: 8px; top: 27px; line-height: 14px; font-weight: 600; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif; >.whatsapp-button .text-button:hover span < opacity: 1; font-size: 11px; >.whatsapp-button:hover i < display:none; >.whatsapp-button:hover < z-index:1; background:#fff; color:transparent; transition:.3s; >.whatsapp-button:hover i < color:#25D366; font-size:44px; transition:.3s; >.whatsapp-button i < color:#fff; font-size:44px; transition:.3s; line-height: 66px;transition: .5s ease-in-out; animation: 1200ms ease 0s normal none 1 running shake; animation-iteration-count: infinite; -webkit-animation: 1200ms ease 0s normal none 1 running shake; -webkit-animation-iteration-count: infinite; >@-webkit-keyframes hoverWave < 0% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >40% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >80% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067) >100% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.0) >>@keyframes hoverWave < 0% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >40% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) >80% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067) >100% < box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.0) >> @keyframes shake < 0% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >10% < transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); >20% < transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); >30% < transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); >40% < transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); >50% < transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); >60% < transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); >70% < transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); >80% < transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); >90% < transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); >100% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >> @-webkit-keyframes shake < 0% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >10% < transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); >20% < transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); >30% < transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); >40% < transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); >50% < transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); >60% < transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); >70% < transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); >80% < transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); >90% < transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); >100% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >>

Установка кнопки на WordPress

В админ панели WordPress переходим в раздел «внешний вид/редактор тем». Далее, в зависимости от структуры вашей темы, заходим в нужные файлы вносим правки. HTML код обычно вставляют в файл footer.php (перед закрывающим тегом ), а CSS в конец файла style.css.

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

Например, для вставки HTML подойдут такие плагины, как «DCO Insert Analytics Code», «Head & Footer Code», «Woody Snippets» и им подобные. А для добавления CSS подойдёт плагин «Custom CSS» или «SiteOrigin CSS».

Источник

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, Viber и Telegram

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

А для компаний, популярность мессенджеров изменила сам формат общения с клиентами. Многие пользователи уже не хотят звонить и общаться голосом, им удобнее написать в любимый мессенджер и получить консультацию в чате с менеджером.

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

Как установить мессенджеры на сайт

Для того чтобы пользователь по клику на иконку мессенджера (Ватсапа, Вайбера или Телеграмма) сразу переходил в чат с менеджером, нужно установить на сайт специальные ссылки. И разместить иконки.

Ссылка на Whatsapp на сайте:

Ссылка на Telegram на сайте:

Заменяем номера телефонов в примерах выше и загружаем на сайт иконки.
Для Телеграмма вместо номера указываем логин (без знака @ в начале).

Ссылка на Viber на сайте:

Эти ссылки нужно установить в html-код сайта. Обычно в шапку или под ней. Рядом с номером телефона.

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

Для Телеграмма, вместо номера, нужно указать логин. Задать его можно в настройках приложения.
Заходим в Setting, и в пункте username указываем логин.

В коде его нужно прописывать без знака «@».

Где найти значки

Также вам понадобятся иконки мессенджеров.
Их можно скачать ниже

Иконки нужно загрузить на сайт и указать путь к ним (в коде выше путь выделен зеленым).

Как получить ещё больше обращений с сайта

Использовать необычный вариант почты. В нашем Телеграм-канале мы рассказывали, как эту почту можно назвать, чтобы увеличить конверсию в письмо. Почитайте, это интересно.

Еще один вариант — установить на сайт чат с онлайн-консультантом.

Он включает, как интеграцию с мессенджерами, так и возможность общения в онлайн-чате.

Обязательно указываем для консультанта имя, фамилию и добавляем реальную аватарку.

Из полезных функций в jivosite есть авто-приглашение к диалогу.
При этом можно настроить различные приглашения для разных страниц.

Если какие-то из услуг или определённые товары пользуется особой популярностью, можно настроить отдельное приглашение к диалогу на их страницах.

Например для карточки Iphone XS, можно настроить такое авто-приглашение к диалогу:

Кстати, Iphone XS не боится воды, его можно даже ронять в воду 🙂

У вас есть какие-то вопросы по Iphone XS или о наших условиях доставки и оплаты?

Дополнительно, в jivosite также есть интеграция с viber и telegram. Плюс интеграции с группой в VK, Facebook.

Можно настроить, что все заявки из всех каналов будут поступать в единую систему и распределяться по менеджерам.

В заключении

По статистике наших клиентов от 20 до 40% обращений к нашим клиентам приходят через мессенджеры или онлайн-чат.

Источник

WhatsApp Logo/Icon Using HTML & CSS Code

Welcome to the CodeWithRandom blog. In This Article, We learn how to create a WhatsApp Logo. We use HTML & CSS Code for Creating WhatsApp Logo.

Hope you enjoy our blog so let’s start with a basic HTML structure for the WhatsApp Logo.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

There is all the HTML Code for the WhatsApp Logo. Now, you can see output without CSS. Then we write CSS Code for the WhatsApp Logo.

Output

CSS Code For WhatsApp Logo

body < margin: 0; padding: 0; background: lightblue; >div < width: 70px; height: 70px; border-radius: 35px; background: #3AC371; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); >.white < width: 80px; height: 80px; border-radius: 40px; background-color: #fff; box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3); >.white::before < content: ""; top: 65px; left: -15px; border-width: 20px; border-style: solid; border-color: transparent #fff transparent transparent; position: absolute; transform: rotate(-50deg) rotateX(-55deg); >.white::after < content: ""; top: 63px; left: -4px; border-width: 15px; border-style: solid; border-color: transparent #3AC371 transparent transparent; position: absolute; transform: rotate(-51deg) rotateX(-50deg); >.fas

We have completed our CSS Code Section For WhatsApp Logo. Here is our final updated output with HTML And CSS Code.

Final Output Of WhatsApp Logo Using HTML And CSS

We have completed our CSS Code Section. Here is our updated output with HTML & CSS. Hope you like the WhatsApp Logo, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

This post teaches us to create a WhatsApp Logo using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Источник