Меню png иконка: Меню Ресторан Иконка, Иконка Меню, эмблема, еда png

Другие иконки в категории: Интерфейс

сенсорное приложение

квадрат-шеврон-правый-альт

колонки

двойной левый шеврон

настройки overscan

мусор

ручка

стрелка-толстый-квадрат-вниз

вертикально-шпунтовый

колонки

выключатель

стрела-толстое дно

шеврон снизу-альт

ясно-все

выбрать

синхронизация

шеврон-круг-левый

шеврон-левый-альт

шеврон-квадрат-вниз

ход

стрелка-толстая-квадратная вверх

зубец

стрелка-толстый-квадрат-левый

приложения

стрелка-толстый-круг-правый

х квадрат

восстановление

шеврон-квадрат-левый

обои

шеврон-круг-левый

минус-круг

чек-дабл-альт

по стрелке снизу

развертка

минус квадрат

перемещение горизонтальное

проблема синхронизации

приложения-настройки

проверка

экономия

стрелка-низ

Толстая стрелка сверху

каретка

список просмотра

каретка слева

Лупа

Толстая стрелка справа

вид одеяло

пин

выключатель

просмотр-повестка

стрелка-толстая-квадратная вверх

восстановление окна

толстая стрелка налево

бесконечность

яркость-авто

бан

контрольный вариант

пин

контрольный вариант

стрелка вправо

подробнее

таймер

двойной шеврон вниз

таблица

шеврон-квадрат-вниз-альт

матрица обзора

chevron-circle-left-alt

каретка слева

Быстрые ссылки

• Документация
• Поддержка
• Блог

Github

• Иконки CoreUI
• Иконки CoreUI для React. js
• Иконки CoreUI для Vue.js

О нас

• Нанимайте нас
• Услуги
• Политика в отношении файлов cookie
• Политика конфиденциальности

22 Значок меню PNG — Дизайн логотипа Значок

Получите бесплатные значки меню в окнах материалов iOS и других стилях дизайна для мобильных веб-проектов и проектов графического дизайна. Готовы к использованию в мобильных приложениях и презентациях для веб-дизайна.

Значок меню Прозрачное меню PNG изображения Amp Vector Freeiconspng

Бесплатные изображения идеально подходят для вашего дизайна и доступны как в PNG, так и в векторе.

Значок меню png . Скачать значок меню бесплатные иконки и изображения в формате PNG. Значки меню Пуск загрузить 370 значков меню Пуск бесплатные значки всех и для всех найдите значок, который вам нужен, сохраните его в избранное и загрузите его бесплатно. Значок меню png 3 строки png изображения фон и скачать бесплатно фото png стоковые картинки и.

Flaticon самая большая база бесплатных векторных иконок. Загрузите более 7969 иконок меню в формате svg psd, png eps или в виде веб-шрифтов.Скачать 13867 иконок меню.

23 изображения значков меню для презентаций графического дизайна, веб-дизайна и других проектов. Доступно в форматах png и svg. Загрузите значки во всех форматах или отредактируйте их для своих дизайнов.

Этот файл посвящен PNG и включает в себя значок меню png Трехстрочная сказка, которая может помочь вам создать дизайн намного проще, чем когда-либо прежде. Лучший бесплатный png значок меню hd png 3 строки png изображения фон png png файл легко с одним щелчком мыши бесплатные png изображения png и прозрачный фон с высоким качеством.Загрузите 65 векторных значков и наборов значков, доступных в формате png ico или icns для Mac для бесплатного использования.

Открыть меню Вектор Значок Svg Svg Repo

Значок меню ресторана Меню Png Free Transparent Png

Значок меню стиля линии Доступен в Svg Png Eps Ai

Иконки меню Скачать бесплатные векторные иконки Существительное Проект

Значки меню гамбургера Трехстрочное меню Значок Navicon

Значок меню гамбургер PNG и Svg вектор Бесплатная загрузка

Строка меню Меню Svg Png Значок Скачать бесплатно 251231

Burger General Ham List Menu Icon Office Icon Free

Menu Icon Png Download 512 512 Free Transparent Hamburger

Iconexperience Значок меню G Collection

Значок меню гамбургер прозрачный Png Stickpng

Значки мобильного меню Загрузить бесплатные векторные значки Существительное Project

Значок меню P ng Download 512 512 Free Transparent Menu Bar

Меню Бесплатных Иконок Интернета и Веб Плоские Иконки Бесплатно

Ресторан Значок Png Меню Icono Png Transparent Png

Синий Значок Меню Прозрачный Png Значок Меню Png Потрясающий

Меню Значок Ресторан Значок Меню Эмблема Еда Png Pngegg

Значок меню Прозрачный фон Png Клипарты Скачать бесплатно

12 Значок меню бургера Белый Png Значок меню бургера Бургер

Значок меню ресторана Материал силуэт меню клипарт

Значок векторного меню Значки меню Значки меню Иллюстрация приложений PNG и

Как сделать Добавление значков в меню Divi

В этом уроке я покажу вам, как добавлять значки в модуль меню Divi Theme Builder, в главное меню, подменю или в мегаменю!

Добавление значков в меню Divi

Еще одно руководство по меню Divi

На данный момент у нас довольно много руководств по меню Divi , и я знаю, что многие из вас в восторге от этого. У нас все еще есть больше в нашей серии о модуле меню, но классная часть сегодняшнего урока заключается в том, что мы заставили код работать как с меню Divi по умолчанию, так и с модулем меню. Я давно хотел показать вам, как добавлять значки в меню Divi, и наконец добрался до этого!

Иконки — отличный способ добавить интересности вашему меню. Правый значок даст пользователю тонкое указание на то, о чем идет речь, но они также выглядят действительно. Я также добавлю бонус в конце и покажу вам, как добиться крутого эффекта зависания!

Добавить значки в главное меню Divi Ссылки

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

Если вы не знаете, куда добавить код, ознакомьтесь с нашим руководством под названием Где добавить собственный код в Divi . Короткий ответ — скопировать фрагмент кода и добавить его в поле Divi> Параметры темы> Пользовательский CSS .

  / * добавить значок в пункты главного меню Divi * /

nav li a: before {
    семейство шрифтов: 'ETMODULES';
    содержание: '\ 24';
    выравнивание текста: центр;
    вертикальное выравнивание: по центру;
    маржа справа: 10 пикселей;
    маржа слева: -10 пикселей;
    цвет: # 2cba6c;
    размер шрифта: 1em;
    переход: все.3с легкость;
}  

Добавить значки в раскрывающееся меню подменю Divi Ссылки

Этот второй фрагмент кода применяет значок к ссылкам на вложенные файлы. Таким образом, это добавит значок к элементам раскрывающегося меню Divi в модуле «Меню» или в меню по умолчанию. Здесь применяется тот же процесс, просто скопируйте код и вставьте его в поле Divi> Параметры темы> Пользовательский CSS .

  / * добавить значок в пункты подменю Divi * /

nav li li a: before {
    семейство шрифтов: 'ETMODULES';
    содержание: '\ 24';
    выравнивание текста: центр;
    вертикальное выравнивание: по центру;
    маржа справа: 10 пикселей;
    маржа слева: -10 пикселей;
    цвет: # 2cba6c;
    размер шрифта: 1em;
    переход: все.3с легкость;
}  

Различные значки для разных ссылок меню

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

Вот пример добавления настраиваемого класса к пункту меню.

И вот как мы нацелены на этот пункт меню.Мы хотим добавить значок корзины, поэтому мы добавляем «e015» во фрагмент CSS (см. Шаг ниже для получения дополнительной информации об этом).

  .pa-menu-shop> a: before {
    семейство шрифтов: 'ETMODULES';
    содержание: '\ e015';
    выравнивание текста: центр;
    вертикальное выравнивание: по центру;
    маржа справа: 10 пикселей;
    маржа слева: -10 пикселей;
    цвет: # 2cba6c;
    размер шрифта: 1em;
    переход: вся легкость .3s;
}  

Вот как это будет выглядеть:

Теперь вы можете повторить это для любого значка рядом с любым пунктом меню!

Выбор значков для меню Divi

Очевидный шаг здесь — заменить значок (или оставить стрелку, если она вам нравится).Здесь вы можете выбрать значок из встроенного семейства шрифтов значков Divi ETModules или семейства значков Font Awesome .

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

1. Модули ETM

Первый набор значков, который вы можете использовать, — это тот, который встроен в Divi по умолчанию и не требует дополнительных действий для активации.Все, что вам нужно сделать, это выбрать значок и затем добавить его в фрагмент CSS, который я дам. Вы можете узнать больше об этих значках в , сообщении блога Elegant Themes здесь . Вам нужно будет сослаться на это, чтобы получить коды значков.

Во фрагментах кода у нас уже есть «font-family:‘ ETMODULES ’;» как семейство шрифтов, поэтому, если вы используете какой-либо из этих значков, вам не нужно ничего менять.

Вы можете выбрать любую иконку.

Это всего лишь снимок экрана некоторых доступных значков.Часть, которая может сбивать с толку, — это код значка. На самом деле вам не нужна первая часть кода, поэтому вы можете игнорировать ее часть. Итак, для четвертого, как вы видите, мы использовали только «24» , чтобы получить стрелку.

2. Font Awesome

Второй набор иконок, который вы можете использовать, — это Font Awesome. Если у вас уже есть Font Awesome, интегрированный с вашим сайтом, тогда все готово. В противном случае ознакомьтесь с нашим руководством по Как добавить Font Awesome в Divi .

Чтобы использовать значок Font Awesome, вам необходимо заменить семейство шрифтов во фрагментах. Но не волнуйтесь, это очень просто. Просто замените «ETModules» на «Font Awesome 5 Free».

Следующая строка в CSS — это код значка. Вы можете заменить «24» кодом значка от Font Awesome. Просто найдите в их библиотеке значков и щелкните значок. Затем скопируйте Unicode, как показано на изображении ниже.

В этом примере значок Unicode — это «f102», , поэтому все, что нам нужно сделать, это добавить его в фрагмент CSS, например «content:« \ f102 ″; » , и появится значок.

Добавление крутых эффектов наведения к значкам меню Divi

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

  / * изменить цвет и положение значка подменю при наведении * /

nav li ul li a: hover: before {
    маржа слева: -7 пикселей;
    цвет: # e03574! important;
    переход: вся легкость .3s;
}  

Последнее обновление: 10 мая, 2021 в 14:31

Вот и все!

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

Нельсон — владелец компании Pee-Aye Creative в прекрасном штате Пенсильвания.Он любит помогать малому бизнесу, исследовать природу, создавать веб-сайты с Divi и обучать других.

Оставить отзыв!

Комментируя, вы соглашаетесь с нашей Политикой в ​​отношении комментариев на блогах и YouTube.

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



У нашего видео есть просмотры! Присоединяйтесь к подписчикам и наслаждайтесь видео-уроками!

Посетите наш канал

{«id»: null, «mode»: «button», «open_style»: «in_modal», «currency_code»: «USD», «currency_symbol»: «$», «currency_type»: «decimal», «blank_flag_url» «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /blank.gif «,» flag_sprite_url «:» https: \ / \ / www.peeayecreative .com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /flags.png «,» default_amount «: 500,» top_media_type «:» none «,» Feature_image_url «: false,» Feature_embed «:» «,» header_media «: null,» file_download_attachment_data «: null,» recurring_options_enabled «: true,» recurring_options «: {» never «: {» selected «: true,» after_output «: «Только один раз»}, «еженедельно»: {«selected»: false, «after_output»: «Каждую неделю»}, «ежемесячно»: {«selected»: false, «after_output»: «Каждый месяц»}, » ежегодно «: {» selected «: false,» after_output «:» Каждый год «}},» strings «: {» current_user_email «:» «,» current_user_name «:» «,» link_text «:» Оставить отзыв «, «complete_payment_button_error_text»: «Проверьте информацию и попробуйте еще раз», «payment_verb»: «Pay», «payment_request_label»: «Pee-Aye Creative», «form_has_an_error»: «Пожалуйста, проверьте и исправьте ошибки выше», «general_server_error»: » Что-то сейчас не работает. Повторите попытку. «,» Form_title «:» Pee-Aye Creative «,» form_subtitle «: null,» currency_search_text «:» Страна или валюта здесь «,» other_payment_option «:» Другой способ оплаты «,» manage_payments_button_text «:» Управление ваши платежи «,» thank_you_message «:» Спасибо за поддержку! Неделя за неделей нас поддерживают такие люди, как вы! «,» Payment_confirmation_title «:» Pee-Aye Creative «,» Receipt_title «:» Ваша квитанция «,» print_receipt «:» Распечатать квитанцию ​​»,» email_receipt «:» Электронная почта Квитанция «,» email_receipt_sending «:» Квитанция об отправке… «,» email_receipt_success «:» Квитанция по электронной почте успешно отправлена ​​»,» email_receipt_failed «:» Не удалось отправить квитанцию ​​по электронной почте. Пожалуйста, попробуйте еще раз. «,» Receive_payee «:» Paid to «,» receive_statement_descriptor «:» Это будет отображаться в вашей выписке как «,» receive_date «:» Date «,» receive_transaction_id «:» Transaction ID «,» Receaction_transaction_amount » : «Amount», «Refund_payer»: «Refund from», «login»: «Войдите, чтобы управлять своими платежами», «manage_payments»: «Manage Payments», «transaction_title»: «Your Transactions», «transaction_title»: » Квитанция о транзакции «,» transaction_period «:» Период действия «,» scheme_title «:» Ваши планы «,» scheme_title «:» Управление планом «,» scheme_details «:» Сведения о плане «,» scheme_id_title «:» Идентификатор плана «,» setting_payment_method_title «:» Способ оплаты «,» scheme_amount_title «:« Сумма плана »,« scheme_renewal_title »:« Дата следующего продления »,« scheme_action_cancel »:« Отменить план »,« scheme_action_cant_cancel »:« Отмена в настоящее время недоступна. «,» scheme_action_cancel_double «:» Вы уверены, что хотите отменить? «,» scheme_cancelling «:» Отмена плана … «,» scheme_cancelled «:» План отменен «,» scheme_failed_to_cancel «:» Не удалось отменить план » , «back_to_plans»: «\ u2190 Вернуться к планам», «update_payment_method_verb»: «Update», «sca_auth_description»: «У вас есть ожидающий платеж за продление, требующий авторизации.», «sca_auth_verb»: «Авторизовать платеж за продление», «sca_authing_verb «:» Авторизация платежа «,» sca_authed_verb «:» Платеж успешно авторизован! «,» Sca_auth_failed «:» Авторизация невозможна! Пожалуйста, попробуйте еще раз.»,» login_button_text «:» Войти «,» login_form_has_an_error «:» Пожалуйста, проверьте и исправьте ошибки выше «,» uppercase_search «:» Search «,» lowercase_search «:» search «,» uppercase_page «:» Page «,» lowercase_page «:» page «,» uppercase_items «:» Items «,» lowercase_items «:» items «,» uppercase_per «:» Per «,» lowercase_per «:» per «,» uppercase_of «:» Of «,» lowercase_of » : «of», «back»: «Вернуться к планам», «zip_code_placeholder»: «Zip \ / Почтовый индекс», «download_file_button_text»: «Загрузить файл», «input_field_instructions»: {«tip_amount»: {«placeholder_text»: «Сколько бы вы хотели дать чаевых?», «Initial»: {«struction_type «:» normal «, «struction_message»: «Сколько вы хотите давать чаевые? Выбирайте любую валюту. «},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Сколько вы хотите дать чаевые? Выберите любую валюту. «},» Invalid_curency «: {«struction_type»: «error», «struction_message «:» Выберите допустимую валюту. «}},» Повторяющийся «: {» placeholder_text «:» Повторяющийся «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Как часто вы хотели бы это делать? «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Как часто вы будете хотите дать это? «},» empty «: {«struction_type»: «error», «struction_message «:» Как часто вы хотели бы это делать? «}},» name «: {» placeholder_text «:» Имя по кредитной карте «,» initial «: {«struction_type»: «normal», «struction_message «:» Введите имя, указанное на вашей карте.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Введите имя на вашей карте. «},» пустой «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Пожалуйста введите имя на своей карточке. «}},» privacy_policy «: {» terms_title «:» Условия использования «,» terms_body «: null,» terms_show_text «:» Просмотреть условия «,» terms_hide_text «:» Скрыть условия «, «начальный»: {«тип_ инструкции»: «нормальный», «сообщение_инструкции»: «я согласен с условиями. «}, «не отмечен»: {«тип_ инструкции»: «ошибка», «сообщение_инструкции»: «пожалуйста, примите условия .»},» проверено «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Я согласен с условиями. «}},» электронная почта «: {» текст_пространства «:» Ваш адрес электронной почты «,» начальный «: {«тип_инструкции»: «нормальный», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «пусто»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «не_адрес_почты_почты»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Убедитесь, что вы ввели действительный адрес электронной почты»} }, «note_with_tip»: {«placeholder_text»: «Ваша заметка здесь… «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Прикрепите примечание к своей подсказке (необязательно) «},» пусто «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции » : «Прикрепите примечание к своей подсказке (необязательно)»}, «not_empty_initial»: {«struction_type «:» normal «, «struction_message»: «Приложите примечание к своей подсказке (необязательно)»}, «save»: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Сохранение примечания . .. «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Примечание успешно сохранено! «},» ошибка «: { «тип_инструкции»: «ошибка», «сообщение_инструкции»: «Невозможно сохранить примечание примечания в это время.Повторите попытку. «}},» Email_for_login_code «: {» placeholder_text «:» Ваш адрес электронной почты «,» initial «: {«struction_type»: «normal», «struction_message «:» Введите свой адрес электронной почты для входа. «} , «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите адрес электронной почты для входа.»}, «пустой»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите адрес электронной почты для входа. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите адрес электронной почты, чтобы войти в систему. «}},» login_code «: {» initial «: {«struction_type»: «normal», «struction_message «:» Проверьте свою электронную почту и введите код для входа.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Проверьте свою электронную почту и введите код входа. «},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «: «Проверьте свою электронную почту и введите код входа.»}, «Empty»: {«struction_type «:» error «, «struction_message»: «Проверьте свою электронную почту и введите код входа.»}}, «Stripe_all_in_one»: {» initial «: {«struction_type»: «normal», «struction_message «:» Введите здесь данные вашей кредитной карты. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите данные вашей кредитной карты здесь.»},» успех «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Введите здесь данные своей кредитной карты. «},» недопустимое_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» номер карты не является действительным номером кредитной карты. «},» invalid_expiry_month «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_expiry_year «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_cvc «: {«struction_type»: «error», «struction_message «:» Код безопасности карты недействителен. «},» неверное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Неверный номер карты. «},» неполное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» карточка номер неполный. «},» неполный_cvc «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» код безопасности карты неполный. «},» неполное_экспири «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Срок действия карты неполный. «},» Incomplete_zip «: {» command_type «:» error «, «struction_message»: «Почтовый индекс карты неполный.»},» expired_card «: {» statement_type «:» error «, «struction_message»: «Срок действия карты истек.»}, «invalid_cvc»: {«struction_type «:» error «, «struction_message»: «Безопасность карты неверный код. «},» invalid_zip «: {«struction_type»: «error», «struction_message «:» Не удалось проверить почтовый индекс карты. «},» invalid_expiry_year_past «: {«struction_type»: «error», «struction_message «:» Срок действия карты истек «},» card_declined «: {«struction_type»: «error», «struction_message «:» Карта отклонена. «},» Отсутствует «: {» Тип_инструкции «:» ошибка «,» Сообщение_инструкции «:» У клиента нет карты, с которой производится оплата. «},» Ошибка_работки «: {» Тип_инструкции «:» ошибка «,» инструкция_message «:» Произошла ошибка при обработке карты. «},» invalid_request_error «: {» statement_type «:» error «, «struction_message»: «Невозможно обработать этот платеж, попробуйте еще раз или используйте альтернативный метод.»}, «invalid_sofort_country»: {«struction_type «:» error «, «struction_message»: «SOFORT не принимает страну выставления счета.Попробуйте другую страну. «}}}},» Fetched_oembed_html «: false}

{» date_format «:» F j, Y «,» time_format «:» g: ia «,» wordpress_permalink_only «:» https: \ / \ /www.peeayecreative.com \ / how-to-add-icons-to-the-divi-menu \ / «,» all_default_visual_states «:» наследовать «,» modal_visual_state «: false,» user_is_logged_in «: false,» stripe_api_key «:» pk_live_51EARn4E3j6GcARDR3oo6L91XPb3rfnNl9j6ieomgjlZjVvj7nCzKCTphxwu38s20syRaBKveuT5NFmm4fZqUHOPe00fugbEkRDc «, https://support. bypeeayecreative.com \ / wp-admin \ /admin.php? page = tip-jar-wp & mpwpadmin1 = welcome & mpwpadmin_lightbox = do_wizard_health_check «,» close_button_url «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / плагины \ / tip-jar-wp \ / \ / assets \ / images \ /closebtn.png «}

— CSS: каскадные таблицы стилей

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

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

 
курсор: авто;
курсор: указатель;
. ..
курсор: уменьшение масштаба;


курсор: url (hand.cur), указатель;


курсор: url (cursor_1.png) 4 12, авто;
курсор: url (cursor_2.png) 2 2, указатель;


курсор: url (cursor_1.svg) 4 5, url (cursor_2.svg), ..., url (cursor_n.cur) 5 5, прогресс;


курсор: наследовать;
курсор: начальный;
курсор: вернуться;
курсор: не установлен;
  

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

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

Значения

Необязательно

URL (…), или список, разделенный запятыми, url (…), url (…),… , указывающий на файл изображения. Более одного URL-адреса () могут быть предоставлены в качестве резервных вариантов на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант без URL (одно или несколько значений ключевого слова) должен находиться в конце списка резервных копий.

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

Необязательные координаты x и y, указывающие точку доступа курсора; точное положение курсора, на который указывает курсор.

Цифры даны в пикселях изображения. Они расположены относительно левого верхнего угла изображения, который соответствует « 0 0 », и зажаты в границах изображения курсора. Если эти значения не указаны, они могут быть прочитаны из самого файла, в противном случае по умолчанию они будут отображаться в верхнем левом углу изображения.

ключевое слово

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

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

 [[ [ ]? ,] * [авто | по умолчанию | нет | контекстное меню | помощь | указатель | прогресс | подождите | ячейка | перекрестие | текст | вертикальный текст | псевдоним | копия | двигаться | без капель | не разрешено | электронное изменение размера | n-изменить размер | изменить размер | nw-resize | s-resize | изменить размер | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | изменение размера строки | прокрутка | увеличение | уменьшение | схватить | захват]] 

Ограничения размера значка

Хотя спецификация не ограничивает размер изображения курсора , пользовательские агенты обычно ограничивают их, чтобы избежать возможного неправильного использования. Например, в Firefox и Chromium изображения курсора по умолчанию ограничены размером 32×32 пикселя, а изменения курсора с использованием изображений большего размера обычно просто игнорируются.

Проверьте таблицу совместимости браузеров на предмет примечаний об ограничениях размера курсора.

Поддерживаемые форматы файлов изображений

Спецификация требует, чтобы пользовательские агенты поддерживали файлы PNG, файлы SVG v1.1 в безопасном статическом режиме, которые содержат естественный размер, а также любые другие неанимированные форматы файлов изображений, которые они поддерживают для изображений в других свойствах.Настольные браузеры также широко поддерживают формат файла .cur .

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