Viber icon font awesome: Viber Icon in Font awesome

Leave a Comment / Разное / By /

Mobile Contact Bar — Плагин для WordPress

  • Детали
  • Отзывы
  • Установка
  • Разработка

Поддержка

Mobile Contact Bar is a compact and highly customizable plugin, which allows your visitors to contact you directly via mobile phones, or access your site’s pages instantly.

The settings page is available under the Settings → Mobile Contact Bar menu in the WordPress dashboard.

Features
  • Icons for social media, call-to-actions, or any links to web pages
  • Simple and intuitive styling with the aid of the Real-time Model
  • Built-in icon picker with Font Awesome 5 integration
  • Customizable URLs using query string parameters
  • No data collection from your website’s visitors
  • Super easy to use, no coding required!
Special Actions
  • Scroll to Top of the page
  • WooCommerce Cart with Item Counter
Supported Protocols
  • http
  • https
  • mailto
  • skype
  • sms
  • tel
  • viber
Tested with
  • Twenty Twenty-Three
  • Twenty Twenty-Two
  • Twenty Twenty-One
  • Twenty Twenty
  • Twenty Nineteen
  • Twenty Seventeen
  • Twenty Sixteen
  • Twenty Fifteen
  • Twenty Fourteen
  • Twenty Thirteen
  • Twenty Twelve
  • Twenty Eleven
  • Twenty Ten
  • Button List meta box
  • Icons, Toggle meta boxes
  • Bar meta box
  • Settings → Mobile Contact Bar
First time Mobile Contact Bar user

Thank you for choosing Mobile Contact Bar! In order to create your bar, simply activate the plugin and visit the plugin’s page by clicking on MCB Contact Bar in your left navigation menu.
Once the plugin page loads, open the Bar box, choose the Display on Devices option, select the device type to enable the bar and then press the Save Changes button at the top of the page.
Mobile Contact Bar will automatically create a default bar with a couple of buttons for you.

Adding buttons to your bar

To add more buttons to your bar, open the Button List box, find a particular list item, select the checkbox, customize the icon and fill in the URI field.
In order to add more buttons, click on the New Button or on one of the icons at the top of the list.

Positioning and styling your bar

To set options for bar (positions, colors, borders, width, height, space, placeholder, etc.), open the Bar box and check the changes on the Real-time Model.
Open the Icons, Badges, or Toggle box and set options for icons, badges, or toggle, respectively.

JavaScript disabled

The plugin works fine without JavaScript on the front-end of your site.


We use JavaScript on the front-end in two cases:
1. if the toggle is activated, then the plugin has an option for saving the toggle state in a cookie, and
2. Scroll to Top, Back in History, and Forward in History actions use inline JavaScript for their functionality.

Cookies

You have full control over the single cookie which is called mobile_contact_bar_toggle.

Cleaning the cache

If your site is chached via a caching plugin such as WP Fastest Cache or Cache Enabler, then it is important to clean those caches after the Contact Bar has been enabled.
Also, if you disable the Contact Bar then the caches need to be cleaned again.

It is very easy and useful. I recommend to all WordPress users. Just a feedback: It can be very good if we can set different background colors to each button. I think this function will makes the plugin better.

Nice plugin! i use it on different websites and its fast to setup and there are many options.

Thank you for this little but very useful plugin

I am very disappointed in this clueless plugin. Even 2 years ago, on the support forum, people asked to include classes for items, but apparently it should take 100 years before the author listens to users. The point is to make such stupid semi-plugins and post them here if you can’t hear the people who use them.

Thank you..!

What a useful plugin!

Посмотреть все 27 отзывов

«Mobile Contact Bar» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

  • Anna Bansaghi

«Mobile Contact Bar» переведён на 1 язык. Благодарим переводчиков за их работу.

Перевести «Mobile Contact Bar» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

2.1.0
  • [Add] Add viber protocol viber-chat, how-to-add-viber-button
  • [Fix] Let the + sign be optional in tel and sms protocols telephone-remove
  • [Fix] Decode / encode query string e-mail-body
  • [Update] Font Awesome 5.15.4
2.0.9
  • [Fix] Missing contact field «checked» notice
2.0.8
  • [Fix] Add rel="noopener" for links opening in new tab links-to-cross-origin-destinations-are-unsafe
2.0.7
  • [Fix] Do not show meta boxes on foreign pages menu-bar-settings-appearing-for-ohter-users-than-admin
2.0.6
  • [Fix] Domain Path
2.0.5
  • [Fix] License version
  • [Fix] Requires at least has been changed to 4.6
2.0.4
  • [Fix] Add padding zero to toggle
2.
0.3
  • [Fix] Add margin and padding to list items
  • [Update] Font Awesome 5.13.0
2.0.2
  • [Fix] Forgotten log message in source your-update-just-broke-my-site
2.0.1
  • [Fix] Extracted cookie into an option Toggle:Cookie
  • [Fix] Restored Bar:Opacity option a-few-more-minor-things-in-2-0
  • [Update] Font Awesome 5.0.13
2.0.0
  • [Upgrade] Reimplement plugin with new options in the database
  • [Upgrade] Font Awesome 5.0.12 can-add-support-fontawesome-v5-0-8
  • [Rename] mcb_front_render_html to mcb_public_render_html
  • [Deprecate] mcb_admin_update_contacts
    and mcb_admin_update_settings filters
  • [Add] UI for managing contacts and details (add, delete, modify) a-couple-of-more-feature-suggestions
  • [Add] Option for setting label on the toggle a-couple-of-more-feature-suggestions
  • [Add] Option for adding space above/below the bar contact-bar-overlaying-footer-credits-on-site, position, hidding-menu
  • [Add] Storing toggle state in a cookie toggle-state, toggle-issue
  • [Add] WhatsApp a-couple-of-feature-ideas, whatsapp-chat
  • [Add] WooCommerce Cart with Item Counter action a-couple-of-feature-ideas
1.
4.1
  • [Fix] Bar width and bar alignment issues
1.4.0
  • [Add] Option for setting bar width bar-width-2
  • [Add] Icon for Instagram no-instagram-icon
  • [Fix] Plugin upgrade on network
1.3.1
  • [Test] Tested up to WordPress 4.9
1.3.0
  • [Add] Icon for texting (sms) text-with-pre-filled-option
1.2.3
  • [Fix] array_filter() issue
1.2.2
  • [Fix] array_filter() issue
1.2.1
  • [Fix] Empty arrays issues
1.2.0
  • [Add] UI for sorting contacts
  • [Add] Option for setting subject, body, cc, bcc of email add-subject-and-body-to-email
  • [Add] Refreshed option page UI using meta boxes
  • [Fix] Prepared plugin for localization
  • [Fix] Sanitized phone number and add a plus sign (+) prefix
  • [Update] Font Awesome 4.7.0
1.1.2
  • [Fix] Left aligned icons in the CSS does-your-plugin-support-the-hemingway-theme
  • [Update] Font Awesome 4. 6.3
1.1.1
  • [Fix] Admin styles
  • [Fix] Public styles
  • [Update] Font Awesome 4.6.1
1.1.0
  • [Add] Option for Bar:Opening links in a new tab no-instagram-icon
1.0.1
  • [Fix] Improved setting and contact validation (sanitization)
  • [Fix] Set the default value of the fixed bar position to true
  • [Fix] Removed obsolated workarounds
1.0.0
  • [Upgrade] Official release
0.1.1
  • [Fix] Default option issue during network activation
0.1.0
  • [Add] Initial release

Мета

  • Версия: 2.1.0
  • Обновление: 3 недели назад
  • Активных установок: 10 000+
  • Версия WordPress: 4.6 или выше
  • Совместим вплоть до: 6.2
  • Версия PHP: 5. 3 или выше
  • Языки:

    Dutch и English (US).

    Перевести на ваш язык

  • Метки:

    call to actioncta buttoniconsocial mediawoocommerce cart

  • Дополнительно

Оценки

Посмотреть все

  • 5 звёзд 22
  • 4 звезды 3
  • 3 звезды 1
  • 2 звезды 0
  • 1 звезда 1

Войдите, чтобы оставить отзыв.

Участники

  • Anna Bansaghi

Поддержка

Решено проблем за последние 2 месяца:

1 из 1

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

Font Awesome (fa fa icon) на русском, подбор шрифтовой иконки по фразам

Font Awesome (fa fa icon) — популярное решение, ведь оно позволяет делать легко масштабируемые шрифтовые иконки.

Есть один минус — приходится подолгу искать необходимую иконку из огромного списка, а это утомительное занятие. Специально для этого мы создали перевод их значений. Существует он по паре иконка —> ключи.

Зачем это нужно? Например, Вы хотите найти иконку «Велосипед». Нажимаете CTRL + F — и вводите соответствующую фразу. После этого Вы можете найти подходящий вариант.

Теперь Вы можете находить нужную вам иконку просто через поиск! Удобно, не так ли?

Данный список будет постоянно пополняться! Именно поэтому мы опубликовали материал на странице, а не в виде документа.

Сама иконка Код для вставки Варианты русского перевода
<i aria-hidden=»true»> </i> Многоэтажный дом, многоквартирный
<i aria-hidden=»true»> </i>  График, статистика, визуальное представление данных
<i aria-hidden=»true»> </i> Банк, каменные колонны, каменное сооружение,
<i aria-hidden=»true»> </i> Бар, кнопка для открытия мобильной версии сайта
<i aria-hidden=»true»> </i> Батарея разряжена, севшая батарейка, аккумулятор сел
<i aria-hidden=»true»> </i> Батарея заряжена, полный аккумулятор
<i aria-hidden=»true»> </i> Низкий заряд батареи
<i aria-hidden=»true»> </i> Тихий, беззвучный
<i aria-hidden=»true»> </i> Камера, фотоаппарат, фотокамера
<i aria-hidden=»true»> </i> Колокол, колокольчик, звук, оповещение
<i aria-hidden=»true»> </i> Велосипед
<i aria-hidden=»true»> </i> Книга, учебник, записи
<i aria-hidden=»true»> </i> Капля, вода
<i aria-hidden=»true»> </i> Портфель, дипломат, багаж
<i aria-hidden=»true»> </i> Рупор, звук
<i aria-hidden=»true»> </i> Калькулятор, рассчет, рассчитать
<i aria-hidden=»true»> </i> Календарь, дата
<i aria-hidden=»true»> </i> Часы, время
<i aria-hidden=»true»> </i> Загрузка, облако, загрузка из облака
<i aria-hidden=»true»> </i> Чай, кофе, стакан
<i aria-hidden=»true»> </i> Мысль, идея, комментарий
<i aria-hidden=»true»> </i> Общение, переписка, чат
<i aria-hidden=»true»> </i> Кредитная карта, банковская платежная карточка
<i aria-hidden=»true»> </i> Куб
<i aria-hidden=»true»> </i> Алмаз, бриллиант, драгоценный камень
<i aria-hidden=»true»> </i> База данных, массив
<i aria-hidden=»true»> </i> Аудиофайл, звуковой файл, аудиокнига
<i aria-hidden=»true»> </i> E-mail, конверт, адрес почты
<i aria-hidden=»true»> </i> Восклицательный знак, внимание, осторожно
<i aria-hidden=»true»> </i> Глаз, смотреть, видимый
<i aria-hidden=»true»> </i> Видеофайл, документ с видео
<i aria-hidden=»true»> </i> Архив, zip
<i aria-hidden=»true»> </i> Огнетушитель
<i aria-hidden=»true»> </i> Открытая папка
<i aria-hidden=»true»> </i> Молния, вспышка, разряд электричества, искра
<i aria-hidden=»true»> </i> Геймпад, джостик, видеоигры, денди, сега
<i aria-hidden=»true»> </i> Песочные часы, часы
<i aria-hidden=»true»> </i> Группа, сообщество, собрание
<i aria-hidden=»true»> </i> Сердце, лайк, like
<i aria-hidden=»true»> </i> Клавиатура, раскладка
<i aria-hidden=»true»> </i> Отель, гостинница, кровать, спать, сон
<i aria-hidden=»true»> </i> Информация, инфо
<i aria-hidden=»true»> </i> Молоток, молот, суд, решение, арест
<i aria-hidden=»true»> </i> Спасательный круг, саппорт, поддержка
<i aria-hidden=»true»> </i> Лампочка, лампа, идея
<i aria-hidden=»true»> </i> Перенаправление, редирект
<i aria-hidden=»true»> </i> Маркер для карты, местоположение, GPS
<i aria-hidden=»true»> </i> Телефон, смартфон,
<i aria-hidden=»true»> </i> Магистр, образование, учиться, обучение
<i aria-hidden=»true»> </i> Кисточка, кисть, рисовать
<i aria-hidden=»true»> </i> Карандаш, писать, публиковать
<i aria-hidden=»true»> </i> Телефон, позвонить
<i aria-hidden=»true»> </i> Круговая диаграмма
<i aria-hidden=»true»> </i> Плюс
<i aria-hidden=»true»> </i> Выключение, выключить, отключить
<i aria-hidden=»true»> </i> Отменить, отмена, назад
<i aria-hidden=»true»> </i> Уменьшить, меньше
<i aria-hidden=»true»> </i> Половина звезды
<i aria-hidden=»true»> </i> Телевизор, монитор, экран
<i aria-hidden=»true»> </i> Ошибка
<i aria-hidden=»true»> </i> Лайк, палец вверх
<i aria-hidden=»true»> </i> Сортировка по алфавиту
<i aria-hidden=»true»> </i> Корзина, мусор, удалить
<i aria-hidden=»true»> </i> Доставка, грузовик
<i aria-hidden=»true»> </i> Видеокамера, видео
<i aria-hidden=»true»> </i> Громкость, звук, оповещение
<i aria-hidden=»true»> </i> Беспроводной интернет, wi-fi
<i aria-hidden=»true»> </i> Авто, машина, автомобиль
<i aria-hidden=»true»> </i> График, столбчатая диаграмма
<i aria-hidden=»true»> </i> Копировать, копия, клон
<i aria-hidden=»true»> </i> Загрузка в облако
<i aria-hidden=»true»> </i> Звук, колокольчик, звонить
<i aria-hidden=»true»> </i> Жук, насекомое, баг
<i aria-hidden=»true»> </i> Календарь, дата
<i aria-hidden=»true»> </i> Шестеренка, настройки
<i aria-hidden=»true»> </i> Писать сообщение, чат
<i aria-hidden=»true»> </i> Компас, навигация
<i aria-hidden=»true»> </i> Цель
<i aria-hidden=»true»> </i> Изменить, править
<i aria-hidden=»true»> </i> Стереть, ластик, стерка
<i aria-hidden=»true»> </i> Внимание, опасность
<i aria-hidden=»true»> </i> Исходный код
<i aria-hidden=»true»> </i> Файл pdf (ПДФ)
<i aria-hidden=»true»> </i> Флаг, локация
<i aria-hidden=»true»> </i> Пробирка, химия
<i aria-hidden=»true»> </i> Открытая папка
<i aria-hidden=»true»> </i> Молоток, суд
<i aria-hidden=»true»> </i> Жесткий диск, сервер, винчестер
<i aria-hidden=»true»> </i> Здоровье, сердце
<i aria-hidden=»true»> </i> Песочные часы
<i aria-hidden=»true»> </i> Изображение, картинка, картина
<i aria-hidden=»true»> </i> Лемон, цитрус
<i aria-hidden=»true»> </i> Рост, развитие
<i aria-hidden=»true»> </i> Волшебная палочка, магия
<i aria-hidden=»true»> </i> Карта
<i aria-hidden=»true»> </i> Футбольный мяч
<i aria-hidden=»true»> </i> Мотоцикл
<i aria-hidden=»true»> </i> Бумажный самолетик
<i aria-hidden=»true»> </i> Самолет
<i aria-hidden=»true»> </i> Печать, принтер
<i aria-hidden=»true»> </i> Увеличить
<i aria-hidden=»true»> </i> Корзина
<i aria-hidden=»true»> </i> Сортировка
<i aria-hidden=»true»> </i> Мусорная корзина
<i aria-hidden=»true»> </i> Шаттл
<i aria-hidden=»true»> </i> Половина закрашенной звезды
<i aria-hidden=»true»> </i> Загрузка файла, закачать файл
<i aria-hidden=»true»> </i> Громкость, вызов
<i aria-hidden=»true»> </i> Опасность, предупреждение, внимание
<i aria-hidden=»true»> </i> Визитка, визитная карточка
<i aria-hidden=»true»> </i> Якорь
<i aria-hidden=»true»> </i> Звездочка, снежинка
<i aria-hidden=»true»> </i> Молния
<i aria-hidden=»true»> </i> Кровать
<i aria-hidden=»true»> </i> Торт
<i aria-hidden=»true»> </i> Многоэтажный дом, многоэтажка
<i aria-hidden=»true»> </i> Автобус
<i aria-hidden=»true»> </i> Календарь
<i aria-hidden=»true»> </i> Добавить в корзину
<i aria-hidden=»true»> </i> Галочка
<i aria-hidden=»true»> </i> Отмеченный чекбокс
<i aria-hidden=»true»> </i> Закрыть, отмена, ошибка
<i aria-hidden=»true»> </i> Неизвестный файл, поврежденный
<i aria-hidden=»true»> </i> Исходный код
<i aria-hidden=»true»> </i> Шестерни, настройка, конфигурация
<i aria-hidden=»true»> </i> Чат, набирает сообщение, пишет
<i aria-hidden=»true»> </i> Изменение размера, ресайз, обрезать
<i aria-hidden=»true»> </i> Питание, столовая
<i aria-hidden=»true»> </i> Загрузить, скачать
<i aria-hidden=»true»> </i> Перетащить
<i aria-hidden=»true»> </i> Обмен, передача
<i aria-hidden=»true»> </i> Внешняя ссылка
<i aria-hidden=»true»> </i> Пипетка, захватить цвет
<i aria-hidden=»true»> </i> Истребитель, скорость

Логотип вызывающего абонента, Значок социальных сетей Социальная сеть Font Awesome Телефон, Логотип Viber PNG

Логотип вызывающего абонента, Значок социальных сетей Социальная сеть Font Awesome Телефон, Логотип Viber PNG
    org/ImageGallery» align=»middle»>
  • Масштабируемая графическая иконка Facebook, логотип Facebook, логотип Facebook PNG размер: 512x512px Размер файла: 5,78 КБ
  • Логотип WhatsApp, приложения для обмена мгновенными сообщениями Viber, imo PNG размер: 2000×951 пикс. Размер файла: 638.53 КБ
  • Логотип WhatsApp Icon, логотип WhatsApp, логотип WhatsApp PNG размер: 584x585px Размер файла: 32,64 КБ
  • WhatsApp BlackBerry Messenger Android BlackBerry 10 Мгновенные сообщения, логотип WhatsApp, логотип вызова PNG размер: 1012x1024px Размер файла: 216.32 КБ
  • Социальные сети Facebook Emoji Icon, значок Instagram, логотип Instagram PNG размер: 512x512px Размер файла: 25,91 КБ
  • org/ImageObject»> значок вызова, телефонный звонок, розыгрыш, электронная почта iPhone, TELEFONO PNG размер: 512x512px Размер файла: 11,96 КБ
  • Логотип WhatsApp Icon, логотип WhatsApp PNG размер: 512x512px Размер файла: 10,73 КБ
  • WhatsApp Logo Компьютерные иконки, WhatsApp, логотип приложения WhatsApp PNG размер: 1100x1100px Размер файла: 69,37 КБ
  • iPhone телефон компьютерные иконки, бесплатный значок телефона, логотип вызова PNG размер: 594x594px Размер файла: 28.42 КБ
  • телефон логотип, телефонный звонок компьютер иконки символ, телефон PNG размер: 914x980px Размер файла: 33,57 КБ
  • org/ImageObject»> Значок логотипа Facebook Messenger, Facebook, логотип Facebook PNG размер: 1600x1600px Размер файла: 34,69 КБ
  • Логотип Whats App, значок обмена мгновенными сообщениями WhatsApp Facebook, логотип WhatsApp PNG размер: 512x512px Размер файла: 26,48 КБ
  • Логотип WhatsApp, значки компьютеров WhatsApp Телефонный звонок, WhatsApp PNG размер: 1019x1019px Размер файла: 137.25 КБ
  • значок телефона, телефонный звонок Компьютерные иконки iPhone Symbol, TELEFONO PNG размер: 980x980px Размер файла: 69.06 КБ
  • Логотип Skype, значок Skype FaceTime, прикладное программное обеспечение, телефонный звонок, логотип Skype PNG размер: 512x512px Размер файла: 157. 28 КБ
  • Бумажная наклейка с логотипом Подарочная упаковка, логотип Instagram, логотип Instagram PNG размер: 964x940px Размер файла: 284.24 КБ
  • иллюстрация вызова, значок Viber Skype WhatsApp, логотип Viber PNG размер: 512x512px Размер файла: 16,12 КБ
  • Значок логотипа электронной почты, электронная почта, черный конверт с логотипом PNG размер: 500x500px Размер файла: 11,73 КБ
  • WhatsApp iPhone Приложения для обмена сообщениями Facebook Messenger, Viber, логотип Watsapp PNG размер: 1527x1563px Размер файла: 506.17 КБ
  • iPhone Компьютерные иконки Телефонный звонок, значок телефонного звонка, синий значок звонка PNG размер: 1024x1024px Размер файла: 46,55 КБ
  • org/ImageObject»> Facebook логотип, социальные сети Компьютерные иконки Facebook, INSTAGRAM LOGO PNG размер: 512x512px Размер файла: 3,22 КБ
  • Skype Emoticon Emoji Smiley Icon, логотип Skype PNG размер: 2698x2727px Размер файла: 2,56 МБ
  • Значок телефонного символа, телефон PNG размер: 512x512px Размер файла: 9,75 КБ
  • Приложение Viber, мобильные телефоны Viber .ipa, viber PNG размер: 1024x1024px Размер файла: 87,44 КБ
  • Логотип Google Plus, значок Google+ Scalable Graphics Font Awesome, логотип Google Plus PNG размер: 512x512px Размер файла: 47,86 КБ
  • org/ImageObject»> Логотип Instagram, значок камеры PNG размер: 512x512px Размер файла: 7,09 КБ
  • Bryant Graphics Компьютерные иконки графика Font Awesome, икон телепон PNG размер: 982x980px Размер файла: 36,35 КБ
  • черный логотип Facebook, значки компьютеров социальные сети YouTube Facebook Messenger, социальные сети PNG размер: 512x512px Размер файла: 14,83 КБ
  • Компьютерные иконки Мобильные телефоны Телефонный звонок, значок номера телефона PNG размер: 512x512px Размер файла: 71,58 КБ
  • кнопка завершения вызова, кнопка телефонного звонка значки компьютеров, кнопка PNG размер: 1000x1006px Размер файла: 9,83 КБ
  • org/ImageObject»> Логотип масштабируемой графической иконки WhatsApp, логотип WhatsApp, логотип телефонного звонка PNG размер: 1000x1000px Размер файла: 39,31 КБ
  • логотип приложения вызова, iPhone X Телефонный звонок Компьютерные иконки, вызов PNG размер: 749x749px Размер файла: 48.23 КБ
  • Логотип WhatsApp, сообщение WhatsApp Computer Icons, шаблон значка телефона PNG размер: 980x982px Размер файла: 58.42 КБ
  • Facebook Messenger Мобильные телефоны Рабочий стол, значок Fb, Facebook, значок Facebook PNG размер: 744x840px Размер файла: 234.06 КБ
  • Значок почтового конверта, конверт PNG размер: 512x512px Размер файла: 15 КБ
  • org/ImageObject»> иллюстрация телефонного звонка, телефон логотип компьютерные иконки, значок телефона PNG размер: 541x541px Размер файла: 190,64 КБ
  • Viber logo, Viber Телефонный звонок Текстовые сообщения Мгновенные сообщения Компьютерные иконки, Viber PNG размер: 470x494px Размер файла: 15,59 КБ
  • логотип значка контакта телефона, значки компьютеров iPhone телефонный звонок, значок телефона PNG размер: 512x512px Размер файла: 16,83 КБ
  • Логотип Масштабируемая графическая иконка, логотип Twitter PNG размер: 512x512px Размер файла: 5,65 КБ
  • iPhone 5 iOS Мобильное приложение App Store, Apple iphone, черный iPhone 5 с синим экраном PNG размер: 1182x2144px Размер файла: 190,71 КБ
  • org/ImageObject»> значок приложения вызова, символ значков компьютера iPhone, вызов PNG размер: 1667x1667px Размер файла: 39 КБ
  • Мобильные телефоны Телефонный звонок, логотип мобильного телефона PNG размер: 2555x3442px Размер файла: 120.04 КБ
  • логотип телефона, мобильное приложение Samsung Galaxy, телефонный звонок, софтфон, VoIP-телефон, файл: Phone Shiny Icon.svg PNG размер: 600x600px Размер файла: 24,85 КБ
  • Кнопка «Нравится» на YouTube Facebook Смайлик, палец вверх, значок «Мне нравится» PNG размер: 1600x1600px Размер файла: 55.9КБ
  • iPhone Телефонный звонок Логотип Электронная почта, круто PNG размер: 1024x1024px Размер файла: 22,42 КБ
  • org/ImageObject»> iPhone 6 iPhone 5s iPhone 7 Plus, экран вызова PNG размер: 648x1246px Размер файла: 47,62 КБ
  • Телефонный звонок Компьютерные иконки Номер телефона, электронная почта PNG размер: 980x980px Размер файла: 52,97 КБ
  • синий значок телефона внутри круга, символ телефонного звонка смартфон звонит, телефон PNG размер: 1024x1024px Размер файла: 16,36 КБ
  • Стационарный телефонный звонок Телефонная компания Телефонный номер, телефон PNG размер: 2953x2953px Размер файла: 1,63 МБ
  • iPhone 4 iPhone 7 Разработка мобильных приложений App Store, Apple iphone в руке, белый iPhone 5 PNG размер: 1156x1508px Размер файла: 653. 98 КБ
  • Логотип Facebook, социальные сети Компьютерные иконки Логотип социальной сети, Социальные сети PNG размер: 600x564px Размер файла: 29,92 КБ
  • iPhone 4 Телефонный звонок Звонит трубка, значок телефона PNG размер: 1600x1600px Размер файла: 46,87 КБ
  • Facebook логотип, Компьютерные иконки Facebook, Facebook PNG размер: 2000x2000px Размер файла: 50,95 КБ
  • iPhone Компьютерные иконки Телефон, звонок PNG размер: 980x980px Размер файла: 67,45 КБ
  • иллюстрация синего телефона, iPhone Телефон Логотип Компьютерные иконки, контакт PNG размер: 900x900px Размер файла: 31,26 КБ
  • org/ImageObject»> iPhone Компьютерные иконки, мобильный телефон PNG размер: 1024x1024px Размер файла: 10,71 КБ
  • Социальные сети Компьютерные иконки, социальные иконки PNG размер: 600x564px Размер файла: 14,44 КБ
  • Значок беспроводной сети Wi-Fi, значок Wi-Fi PNG размер: 999x788px Размер файла: 28,37 КБ
  • желтый круг, настоящее солнце, солнце PNG размер: 4724x4724px Размер файла: 2,32 МБ
  • Телефон Иконки компьютеров Мобильные телефоны, Значок телефона Старый, Телефон, Значок телефона, фиолетовый и черный логотип телефона PNG размер: 512x512px Размер файла: 23.9КБ
  • org/ImageObject»> Facebook логотип, социальные сети Компьютерные иконки Facebook Социальная сеть, fb PNG размер: 512x512px Размер файла: 24,79 КБ
  • Смартфон iPhone X, смартфон в руке, человек, держащий космический серый iPhone 6 с белым экраном PNG размер: 556x790px Размер файла: 224,5 КБ
  • Доступ в Интернет Voice over IP Телекоммуникационная схема, технология PNG размер: 1600x1468px Размер файла: 1,23 МБ
  • Значок логотипа YouTube в социальных сетях, значок YouTube, логотип YouTube PNG размер: 500x500px Размер файла: 4,77 КБ
  • Иконки компьютеров Телефонный звонок, Формат значка сохранения телефона, логотип вызова PNG размер: 512x512px Размер файла: 23,62 КБ
  • org/ImageObject»> Логотип Символ Компьютерные иконки Телефон, логотип мобильного телефона, серый беспроводной телефон, графика PNG размер: 1437x2400px Размер файла: 63,43 КБ
  • Социальные сети YouTube Facebook F8 Социальные сети, социальные сети PNG размер: 1116x432px Размер файла: 37,18 КБ
  • Viber Computer Icons Телефонный звонок, Viber PNG размер: 512x512px Размер файла: 12,45 КБ
  • Логотип WhatsApp, Логотип WhatsApp, WhatsApp PNG размер: 576x576px Размер файла: 102.26 КБ
  • Авиационный испытательный полигон Читрадурга Бюджетная гостиница Palm Regency Karnataka Iconfinder Design, логотип WhatsApp PNG размер: 512x512px Размер файла: 7,15 КБ
  • org/ImageObject»> Мобильные телефоны Компьютерные иконки Телефон Предоплата мобильный телефон Бизнес, Значок мобильного телефона Телефон, Значок телефона, значок вызова PNG размер: 512x512px Размер файла: 27,51 КБ
  • Эскиз логотипа телефонного звонка, Телефон Мобильные телефоны Компьютерные иконки Логотип, телефон PNG размер: 904x980px Размер файла: 56,67 КБ
  • желтая улыбка смайлик иллюстрация, смайлик счастье чувство эмоции, смайлик PNG размер: 735x735px Размер файла: 77,53 КБ
  • WhatsApp Computer Icons Мгновенные сообщения, WhatsApp PNG размер: 1600x1600px Размер файла: 24,57 КБ
  • Телефон смартфона iPhone 6 Plus, смартфон в руке, человек, держащий черный iPhone 5 с белым экраном PNG размер: 1325x1550px Размер файла: 883. 82KB

октиконов! | Центр разработчиков Viber

Octicons! | Центр разработчиков Viber

Это пакет Bower для GitHub Octicons.

Добавьте октиконы в свой проект

  1. Создайте новый файл с именем bower.json (если у вас его еще нет).

  2. Добавьте новую строку для зависимости Octicon, указывающую на правильный репозиторий:

 {
    "имя": "мой_великий_проект",
    "зависимости": {
      "октиконы": "*"
    }
  }

  1. Выполнить Bower Установить . Стили Octicons будут загружены по адресу bower_components/octicons .

  2. Ссылка на таблицу стилей octicons.css в вашей страницы:
  1. Просто используйте значок на странице HTML:
 <диапазон>

Конвейер ресурсов Rails

Octicons включает таблицу стилей специально для Rails 4/Sprockets.

  1. Создайте новый файл с именем vendor/assets/bower.json (если у вас его еще нет).

  2. Добавьте новую строку для зависимости Octicon, указывающую на правильный репозиторий:

 {
    "имя": "мой_великий_проект",
    "зависимости": {
      "октиконы": "*"
    }
  }

  1. cd в vendor/assets и запустите bower install . Стили Octicons будут загружены по адресу vendor/assets/bower_components/octicons .

  2. Откройте файл config/application.rb и добавьте следующую строку в приложение:

 config.assets.precompile += %w(*.svg *.eot *.woff *.ttf)
  1. В таблице стилей вашего приложения требуется sprockets-octicons :
 /*
  = требуются звездочки-октиконы
  */
  1. Просто используйте значок на странице HTML:
  1. Если вам нужен помощник по представлению, добавьте что-то вроде этого в app/helpers/application_helper. rb :
 по умолчанию октикон (код)
    content_tag :span, '', :class => "octicon octicon-#{code.to_s.dasherize}"
  конец

Локальная установка

Октиконы легко установить локально, если у вас установлен Homebrew. Просто выполните следующие команды:

 варить установить caskroom/cask/brew-cask
варочный кран "бочонок/купель"
варить бочку установить "шрифт-октиконы"

Передовой опыт

  • Октиконы

    лучше всего выглядят в размерах, кратных 16px. Вы можете обновить размер, используя свойство CSS font-size . Например:

     .octicon {
  размер шрифта: 32px;
}

  • Октиконы не являются моноширинными. Это позволяет им хорошо работать рядом с текстом, но это означает, что по умолчанию они не будут хорошо складываться. Если вы собираетесь складывать октиконы, например, в навигации, вам нужно добавить немного CSS, чтобы сделать их одинаковой ширины и центрировать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *