Documentation

General

  • Call
  • Basiс style
  • Size
  • Icon as a button
  • Other

  • Connecting at the PHP page

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

    Basic style


    .ui-icon has the default property value display: inline-block.



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

    Size


    LG

    Modifier .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

    Modifier .ui-icon-md. Default size.



    <!-- .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

    Modifier .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

    Modifier .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>
    

    Custom size

    .docs-icon-login — arbitrary class. Sets the required icon size in you own module or component styles.



    Only width is needed (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>
    

    Second method of setting your own icon size, write the width (width) directly in the attribute style in .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>
    

    Icon as a button

    Modifier .ui-icon-btn. You can use the tag <button> instead of the class. The result is the same as then using the modifier .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>
    

    Other

    Square icons

    Modifier .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>
    



    © «Bitrix24», 2001-2022
    Up