Документация для разработчиков

Общее

  • Вызов
  • Базовый стиль
  • Размеры
  • Иконка в роли кнопки
  • Прочее

  • Подключение на PHP-странице

    \Bitrix\Main\UI\Extension::load("ui.icons");
    

    Базовый стиль


    .ui-icon имеет по умолчанию свойство display: inline-block.



    <!-- .ui-icon.ui-icon-service-bitrix24 > i -->
    <div class="ui-icon ui-icon-service-bitrix24"><i></i></div>
    

    Размеры


    LG

    Модификатор .ui-icon-lg.



    <!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-lg > i -->
    <div class="ui-icon ui-icon-service-bitrix24 ui-icon-lg"><i></i></div>
    

    MD

    Модификатор .ui-icon-md. Размер по умолчанию.



    <!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-md > i -->
    <div class="ui-icon ui-icon-service-bitrix24 ui-icon-md"><i></i></div>
    

    SM

    Модификатор .ui-icon-sm.



    <!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-sm > i -->
    <div class="ui-icon ui-icon-service-bitrix24 ui-icon-sm"><i></i></div>
    

    XS

    Модификатор .ui-icon-xs.



    <!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-xs > i -->
    <div class="ui-icon ui-icon-service-bitrix24 ui-icon-xs"><i></i></div>
    

    Свой размер

    .docs-icon-login — произвольный класс. Устанавливает необходимый размер иконки в стилях собственного модуля или компонента.



    Достаточно указать только ширину (width).

    <!-- .ui-icon.ui-icon-service-bitrix24.docs-icon-login > i -->
    <style>.docs-icon-login { width: 128px; }</style>
    <div class="ui-icon ui-icon-service-bitrix24 docs-icon-login"><i></i></div>
    

    Второй способ установки собственного размера иконки, прописать ширину(width) непосредственно в атрибуте style в .ui-icon.

    <!-- .ui-icon.ui-icon-service-bitrix24[style="width: 128px;"] > i -->
    <div class="ui-icon ui-icon-service-bitrix24" style="width: 128px;"><i></i></div>
    

    Иконка в роли кнопки

    Модификатор .ui-icon-btn. Вместо класса можно использовать тег <button>. Эффект будет ровно такой же как при спользовании модификатора .ui-icon-btn.



    <!-- a.ui-icon.ui-icon-service-bitrix24.ui-icon-btn > i -->
    <a href="" class="ui-icon ui-icon-service-bitrix24 ui-icon-btn"><i></i></a>
    

    <!-- button.ui-icon.ui-icon-service-bitrix24.ui-icon-btn > i -->
    <button class="ui-icon ui-icon-service-bitrix24"><i></i></button>
    

    Прочее

    Квадратные иконки

    Модификатор .ui-icon-square.



    <!-- .ui-icon.ui-icon-service-bitrix24.ui-icon-square > i -->
    <div class="ui-icon ui-icon-service-bitrix24 ui-icon-square"><i></i></div>
    



    Пользовательские комментарии

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

    Для этого нужно всего лишь авторизоваться на сайте

    Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

    Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
    © «Битрикс», 2001-2019, «1С-Битрикс», 2019
    Наверх