Разное

Иконки текстовые: Иконки для текста без установки шрифтов 🙌

26.04.1989

Содержание

Таблица пиктограмм и иконок HTML с кодами

Таблица пиктограмм HTML, содержит более 100 популярных иконок для оформления контента веб-страниц, рассылок и текстов. Воспользуйтесь удобной навигацией по категориям или перейдите сразу к таблице символов.

  1. Оформление текста;
  2. Офисные предметы;
  3. Ручки и карандаши;
  4. Время и часы;
  5. Семья;
  6. Погода;
  7. Природа;
  8. Цветы;
  9. Кресты;
  10. Эмоции;
  11. Карты;
  12. Прочие символы.

Специальные пиктограммы HTML позволяют оформить текст письма или тему рассылки. Помогают использовать иконки для кнопок и ссылок на сайте. Чтобы разместить символ на странице, необходимо скопировать код символа и вставить в исходный HTML-код страницы.

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

  • Сохранить ссылку
  • Отправить коллегам

Оформление текста

КодСимволОписание
✌Символ галочка
✔Жирная галочка
☑Галочка в квадрате
☒Крестик в квадрате
☓Крест
✅Жирная незакрашенная галочка
✕Крестик
✖Жирный крестик
✗Изогнутый кретик
✘Жирный изогнутый крестик

Офисные предметы

Код
Символ
Описание
✆Знак телефона с проводом
📞📞Телефонная трубка
🕻🕻Телефонная трубка левосторонняя
🕽🕽Телефонная трубка правосторонняя
☎Телефон закрашенный
☏Телефон прозрачный
🕿🕿Черный кнопочный телефон
📱📱Мобильный телефон
☕Чашка чая / кофе
✄Ножницы
✃Ножницы
✉Конверт или письмо
✍Рука с ручкой
💾💾Дискета
🔍🔍Лупа (наклонённая влево)
🔎🔎Лупа (наклонённая вправо)
📆📆Отрывной календарь
💼💼Портфель

Ручки и карандаши

КодСимволОписание
✎Карандаш, вправо-вниз
✏Карандаш
✐Карандаш, вправо-вверх
✑Незакрашенное острие пера
✒Закрашенное острие пера

Время и часы

КодСимволОписание
⏰Будильник
⌚Наручные часы
⌛Песочные часы
⏳Песочные часы

Семья

Код
Символ
Описание
👨👨Мужчина
👩👩Женщина
👦👦Мальчик
👧👧Девочка
💑💑Любящая пара

Погода

КодСимволОписание
❅Зажатая трилистниками снежинка
❄Снежинка
❆Жирная остроугольная снежинка
☃Снеговик
☀Закрашенное солнце с лучами
☁Облака
☂Зонтик
☽Первая четверть луны
☾Последняя четверть луны
🌙🌙Полумесяц

Природа

КодСимволОписание
🌅🌅Восход
🌄🌄Восход над горами

Цветы

КодСимволОписание
✿Закрашенный цветок
❀Незакрашенный цветок
✾Цветок с шестью лепестками
❁Закрашенный обведённый цветок
❂Цветок из точек
❃Цветок из точек
⚛Символ атома
🌷🌷Тюльпан

Транспорт

КодСимволОписание
🚀🚀Ракета
🚁🚁Вертолет
🚂🚂Паровоз
🚃🚃Вагон
🚅🚅Высокоскоростной поезд
🚆🚆Поезд
🚇🚇Метро
🚲🚲Велосипед
🚗🚗Автомобиль
🚚🚚Грузовик
🚛🚛Тягач с прицепом
🚜🚜Трактор
🚙🚙Развлекательный автомобиль
🚌🚌
Автобус
🚑🚑Скорая помощь
🚒🚒Пожарная машина
🚓🚓Полицейская машина
🚕🚕Такси
🚢🚢Корабль
🚣🚣Вёсельная лодка
🚤🚤Катер

Кресты

КодСимволОписание
††Крест
‡‡Крест
☦Крест
☨Крест
✝Крестик
‡Двойной крестик
✞Крест
✙Крест
✚Крест
✛Крест
✜Крест
✟Крест
✠Крест
✢Крест
✣Крест
✤Крест
✥
Крест
☩Крест

Эмоции

КодСимволОписание
✌Жест «Победа»
👍👍Жест «Класс»
👌👌Жест «О’кей»
👋👋Открытая ладонь
☺Смайлик улыбка
☹Смайлик грусть
☻Смайлик грусть закрашенный
😉😉Подмигивающее лицо
🎃🎃
Тыква на Хэллоуин
👻👻Приведение
😈😈Лицо с рогами улыбающееся

Карты

КодСимволОписание
♠Пики закрашенные
♤Пики прозрачные
♣Трефы закрашенные
♧Трефы прозрачные
♥Червы закрашенные
♡Червы прозрачные
♦Бубны закрашенные
♢Бубны прозрачные

Прочие символы

КодСимволОписание
🔔🔔Колокольчик
☠Череп и кости
♤Радиация
☭Серп и молот
☮Знак мира
☯Инь и Янь
🚩🚩Треугольный флаг на палке
♀Знак женского пола
♂Знак мужского пола
⚢Сдвоенный женский знак
⚣Сдвоенный мужской знак
👪👪Семья (люди)
🔉🔉Низкий уровень звука
🔊🔊Высокий уровень звука
♬Знак нота
♫Знак нота
♩Знак нота
♪Знак нота
🎶🎶Музыкальные ноты
🎷🎷Саксофон
💡💡Лампочка электрическая
⚡Высокое напряжение
⚠Предупреждающий знак
💣💣Бомба
✰Звезда прозрачная
★Звезда закрашенная
🌠🌠Звезда падающая
🐾🐾Следы лап
🔥🔥Огонь
🎅🎅Дед Мороз
🎄🎄Рождественская ёлка
🏆🏆Кубок (трофей)
🎁🎁Подарок в коробке
🎉🎉Хлопушка праздничная
💰💰Мешок с деньгами
📺📺Телевизор
👛👛Кошелёк
🍎🍎Яблоко
💌💌Любовное письмо
🍂🍂Осенний лист
🎯🎯Цель / Мишень / Дартс
⚖Весы
🎇🎇Бенгальские огни
💉💉Шприц
💎💎Бриллиант

Внимание! Таблица с кодами популярных HTML символов для оформления контента доступна в другом инструменте.

Что важного в диджитал на этой неделе?

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

Узнать подробнее →

Компьютерные иконки Текстовые сообщения, электронная почта, разное, угол, текст png

Компьютерные иконки Текстовые сообщения, электронная почта, разное, угол, текст png

теги

  • разное,
  • угол,
  • текст,
  • треугольник,
  • монохромный,
  • черный,
  • сообщение,
  • монохромная фотография,
  • личное сообщение,
  • символ,
  • текстовые сообщения,
  • значок почты,
  • почта,
  • область,
  • черный и белый,
  • составить,
  • значки компьютеров,
  • csssprites,
  • скачать,
  • электронная почта,
  • ios 7,
  • линия,
  • вектор,
  • png,
  • прозрачный,
  • бесплатная загрузка

Об этом PNG

Размер изображения
1600x1600px
Размер файла
21. 3KB
MIME тип
Image/png
Скачать PNG ( 21.3KB )

изменить размер PNG

ширина(px)

высота(px)

Лицензия

Некоммерческое использование, DMCA Contact Us

  • Email маркетинг Компьютерные иконки Адрес электронной почты, электронная почта, Разное, текст, прямоугольник png 512x512px 31.18KB
  • Email Logo Icon, Email, черный конверт с логотипом, Разное, текст, мобильные телефоны png 500x500px 11.73KB
  • Электронная почта, электронная почта, разное, угол, текст png 1969x1406px 35.35KB
  • org/ImageObject»> черный циферблат логотип, WhatsApp Email значки компьютеров, WhatsApp, текст, мобильные телефоны, область png 1600x1600px 28.04KB
  • Иконки компьютеров AOL Mail Адрес электронной почты Веб-почта, электронная почта, разное, угол, треугольник png 512x512px 12.81KB
  • Иконка электронная почта, электронная почта, разное, угол, текст png 960x685px 20.92KB
  • почта, значки компьютеров электронная почта, электронная почта, Разное, угол, прямоугольник png 1000x1000px 103.14KB
  • черно-белый логотип электронной почты, электронная почта иконки компьютеров дизайн иконок, электронная почта, Разное, угол, треугольник png 1000x1000px 47. 54KB
  • Адрес электронной почты Компьютерные иконки, почта, разное, угол, треугольник png 980x984px 71.39KB
  • Логотип WhatsApp, значки компьютеров WhatsApp, WhatsApp, текст, андроид, символ png 512x512px 9.23KB
  • Компьютерные иконки Email Logo, P, разное, угол, текст png 2000x2000px 32.97KB
  • иллюстрация сообщения, текстовые сообщения электронной почты значков компьютера, рисунок конверта значка, разное, угол, белый png 512x512px 21.18KB
  • Компьютерные иконки Email Desktop, электронная почта, разное, угол, треугольник png 980x984px 71KB
  • org/ImageObject»> IPMA Email Phone Message, значок электронной почты, разное, угол, телефонный звонок png 1080x1080px 26.78KB
  • Arrow Emoji Компьютерные иконки, стрелка вправо, угол, треугольник, черный png 1024x1024px 9.56KB
  • Arroba Компьютерные иконки На знак, символ, Разное, текст, товарный знак png 512x512px 11.16KB
  • Анимация по электронной почте, электронная почта, Разное, угол, текст png 1434x1024px 9.64KB
  • Компьютерные иконки Email Symbol, электронная почта, разное, угол, логотип png 1000x1000px 14.07KB
  • Иконки электронной почты компьютера, электронная почта, разное, синий, угол png 2000x2000px 69. 51KB
  • Иконки компьютера Адрес электронной почты Значок «Поделиться», электронная почта, разное, угол, прямоугольник png 768x768px 7.94KB
  • Компьютерные иконки логотип, логотип INSTAGRAM, логотип Instagram, Разное, текст, другие png 512x512px 9.37KB
  • черный логотип WhatsApp, WhatsApp значки компьютеров, WhatsApp, логотип, монохромный, черный png 512x512px 24.25KB
  • WhatsApp Icon Logo, логотип WhatsApp, текст, инкапсулированный PostScript, мгновенные сообщения png 512x512px 10.73KB
  • черный и белый, Иконки компьютер телефон значки мобильных телефонов, значок телефона, Разное, текст, телефонный звонок png 981x984px 65. 09KB
  • логотип сообщения, Yahoo!Почта Адрес электронной почты Веб-почта, значок электронной почты, Разное, угол, треугольник png 980x980px 41.89KB
  • iPhone Компьютерные иконки Электронная почта, электронная почта, разное, синий, угол png 1024x1024px 92.5KB
  • Мобильные телефоны Компьютерные иконки Телефон, значок телефона, текст, значок телефона, логотип png 980x980px 34.95KB
  • Телефон значки компьютеров Мобильные телефоны, значок телефона Старый, телефон, значок телефона, фиолетовый и черный телефон логотип, текст, телефонный звонок, логотип png 512x512px 23.9KB
  • org/ImageObject»> Email Message Телефон Текстовые сообщения, значок электронной почты, разное, угол, компания png 1200x1200px 24.36KB
  • Электронная почта Логотип Адрес для отказов Computer Icons Сообщение, электронная почта, разное, угол, текст png 2550x2550px 291.65KB
  • Электронная почта Компьютерные иконки Веб-почта GMX Mail Акароа Дельфины |Круизы Природы Гавани, электронная почта, разное, угол, фотография png 512x512px 7.18KB
  • Компьютерные иконки Компьютерное программное обеспечение WhatsApp Email, значок громкости, текст, мобильные телефоны, Viber png 512x512px 14.4KB
  • телефон логотип, телефонный звонок компьютерные иконки символ, телефон, Разное, CDR, текст png 914x980px 33. 57KB
  • Иллюстрация значок сообщения, iPhone Иконки компьютера Сообщение iOS, Значок сообщения, разное, лист, другие png 512x512px 57.9KB
  • Компьютерные иконки, белый значок INSTAGRAM, текст, другие, логотип png 700x700px 36.75KB
  • черно-белый логотип телефона, WhatsApp Computer Icons Логотип для мобильных телефонов, черно-белый, текст, силуэт, мгновенные сообщения png 2400x2400px 51.04KB
  • Бумажные компьютерные иконки Конверт Почта, конверт почтой, разное, угол, текст png 512x512px 6.77KB
  • Логотип Whats App, значок мгновенного обмена сообщениями WhatsApp Facebook, логотип Whatsapp, текст, логотип, трава png 512x512px 26. 48KB
  • Значки компьютеров адрес электронной почты адрес электронной почты, адрес, Разное, текст, мобильные телефоны png 1600x1600px 70.69KB
  • черная электронная почта, SMS электронная почта текстовые сообщения логотип компьютер значки, конверт почта, разное, угол, текст png 1368x1080px 42.28KB
  • iPhone 7 iMessage Сообщения Текстовые сообщения, яблоко, трава, фрукты Орех, мобильные телефоны png 768x768px 336.31KB
  • белый телефон логотип, значки компьютеров телефон мобильные телефоны, номер телефона, Разное, текст, телефонный звонок png 980x980px 75.5KB
  • красный логотип электронной почты, значки электронной почты компьютера, разное, угол, текст png 512x512px 9. 15KB
  • логотип телефона значок контакта, iPhone значки компьютеров телефонный звонок, значок телефона, электроника, текст, трава png 512x512px 16.83KB
  • Почтовый значок конверта, конверт, разное, угол, текст png 512x512px 15KB
  • Электронная почта Компьютерные иконки MAXCUTTM Inc., электронная почта, разное, cdr, угол png 512x512px 3.96KB
  • электронная почта, значки электронной почты компьютера Электронная рассылка, электронная почта, Разное, логотип, интернет png 878x1024px 415.33KB
  • Мобильные телефоны, телефон, ТЕЛЕФОНО, Разное, телефонный звонок, рука png 662x878px 21. 73KB
  • WhatsApp Email Веб-дизайн Значок сообщения, WhatsApp, логотип WhatsApp, текст, логотип, трава png 1012x1024px 169.31KB
  • черно-белый логотип Whatsapp, плагин WhatsApp для социальных сетей, значки компьютеров, значок какого приложения, логотип, плагин, текстовые сообщения png 981x982px 58.3KB

Иконки в формате шрифта для сайта

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

Что такое иконки в формате шрифта

Иконки в формате шрифта представляет собой просто шрифт. Но в отличие от обычных шрифтов они содержат не буквы и цифры, а значки (иконки).

Иконки в формате шрифта имеют следующие преимущества перед иконками в виде растровых изображений:

  • Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
  • Хорошо масштабируются, т. к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
  • Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
  • Более быстрая загрузка иконок, т.к. они имеют небольшой размер;
  • Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
  • Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

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

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

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

Использование иконок в формате шрифта

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

  1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.

  2. Скопировать и подключить файл CSS поставляемый вместе с пакетом иконок в формате шрифта. Если открыть данный файл, то Вы увидете, что он содержит инструкцию @font-face, которая подгружает шрифты и выполняет их настройку. Кроме этого, этот файл также может содержать правила CSS, с помощью которых упрощается работа с этим набором шрифтов.

    
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    
  3. Скопировать каталог «fonts», содержащий шрифты, в Вашу директорию на сайте. Если уже есть такая директория, то Вы можете просто скопировать содержимое каталога «fonts» в эту директорию.
  4. В зависимости от пакета иконок, который Вы используете, значки обычно вставляются одним из двух способов:
  • с помощью указания соответствующих классов в атрибуте class элемента i или span.
    
    <!-- Отображение иконки в Font Awesome -->
    <span></span>
    <i></i>
    
  • с помощью указания номера значка в атрибуте data:
    
    <!--Шрифт Elegant Icon Font -->
    <!--Отображение иконки с помощью указания номера значка в атрибуте data -->
    <span data-icon="&#x3f;"></span>
    
  • При необходимости можно настроить отображения иконки с помощью стилей CSS.
    
    <!-- Например, увеличить размер иконки в 4 раза с помощью класса Font Awesome fa-4x -->
    <i></i>
    <!-- Например, с помощью указания собственных правил CSS -->
    <!-- Установим размер иконки и её цвет -->
    <i></i>
    

    Но стили для иконок обычно не задают с помощью атрибута style, для этого используют классы:

    
    CSS:
    .large-green {
      font-size: 50px;
      color: green;
    }
    HTML:
    <i></i>
    
  • Примеры использования иконок в формате шрифта

    Рассмотрим некоторые примеры, где можно использовать иконки в формате шрифта.

    • Иконки можно использовать в кнопках:

      
      <button><i></i> Кнопка1</button>
      <button><i></i> Кнопка2</button>
      <button><i></i> Кнопка3</button>
      <button><i></i> Кнопка4</button>
      
    • Иконки можно использовать в меню:

    • Иконки можно использовать в различных информационных виджетах:

    • Иконки можно использовать для создания социальных кнопок:

    • Иконки можно использовать в кнопках, с помощью которых осуществляется работа с записями в таблице:

    Популярные пакеты иконок в формате шрифта

    Рассмотрим наиболее популярные пакеты иконок в формате шрифта.

    Glyphicons

    Font Awesome

    Foundation Icon Fonts

    Brandico

    Elegant Icon Font

    Themify Icons

    Ionicons

    Octicons

    Open Iconic

    Typicons

    Stroke 7

    Ligature symbols

    Различные коллекции иконок


    Font Awesome Icons

    Полный набор из 675 иконок в Font Awesome 4.7.0

    Вы спрашивали, что Font Awesome предлагает 41 новую иконку в версии 4.7. Хотите запросить новые иконки? Вот как. Нужны векторы или хотите использовать на рабочем столе? Проверьте шпаргалку.