Buttons with icons
Description and example
\Bitrix\Main\UI\Extension::load("ui.buttons.icons");
This library is an addition to ui.buttons. It means, that modifier principles are the same as for main library.
Example. Code for buttons
looks as follows:
<!-- .ui-btn.ui-btn-icon-task:empty -->
<button class="ui-btn ui-btn-icon-task"></button>
<!-- .ui-btn.ui-btn-danger.ui-btn-icon-phone-down -->
<button class="ui-btn ui-btn-danger ui-btn-icon-phone-down">Button</button>
<!-- .ui-btn-split.ui-btn-primary.ui-btn-icon-setting -->
<div class="ui-btn-split ui-btn-primary ui-btn-icon-setting">
<button class="ui-btn-main">Button</button>
<button class="ui-btn-menu"></button>
</div>
Button with icon without text
When you need button only with icon, no space character inside the button, and the button is not a tag <input>. Otherwise, pseudo class :empty is not triggered, and the button will be displayed incorrectly visually.
<!-- .ui-btn.ui-btn-icon-add:empty --> <button class="ui-btn ui-btn-icon-add"></button>
Modifier .ui-btn-icon-add.
List of icons
| Button | Code |
|---|---|
<!-- .ui-btn.ui-btn-icon-add -->
<button class="ui-btn ui-btn-icon-add">.ui-btn-icon-add</button>
<!-- .ui-btn-split.ui-btn-icon-add -->
<div class="ui-btn-split ui-btn-icon-add">
<button class="ui-btn-main">.ui-btn-icon-add</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-stop-->
<button class="ui-btn ui-btn-icon-stop">.ui-btn-icon-stop</button>
<!-- .ui-btn-split.ui-btn-icon-stop-->
<div class="ui-btn-split ui-btn-icon-stop">
<button class="ui-btn-main">.ui-btn-icon-stop</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-start-->
<button class="ui-btn ui-btn-icon-start">.ui-btn-icon-start</button>
<!-- .ui-btn-split.ui-btn-icon-start-->
<div class="ui-btn-split ui-btn-icon-start">
<button class="ui-btn-main">.ui-btn-icon-start</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-pause-->
<button class="ui-btn ui-btn-icon-pause">.ui-btn-icon-pause</button>
<!-- .ui-btn-split.ui-btn-icon-pause-->
<div class="ui-btn-split ui-btn-icon-pause">
<button class="ui-btn-main">.ui-btn-icon-pause</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-setting-->
<button class="ui-btn ui-btn-icon-setting">.ui-btn-icon-setting</button>
<!-- .ui-btn-split.ui-btn-icon-setting-->
<div class="ui-btn-split ui-btn-icon-setting">
<button class="ui-btn-main">.ui-btn-icon-setting</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-task-->
<button class="ui-btn ui-btn-icon-task">.ui-btn-icon-task</button>
<!-- .ui-btn-split.ui-btn-icon-task-->
<div class="ui-btn-split ui-btn-icon-task">
<button class="ui-btn-main">.ui-btn-icon-task</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-info-->
<button class="ui-btn ui-btn-icon-info">.ui-btn-icon-info</button>
<!-- .ui-btn-split.ui-btn-icon-info-->
<div class="ui-btn-split ui-btn-icon-info">
<button class="ui-btn-main">.ui-btn-icon-info</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-search-->
<button class="ui-btn ui-btn-icon-search">.ui-btn-icon-search</button>
<!-- .ui-btn-split.ui-btn-icon-search-->
<div class="ui-btn-split ui-btn-icon-search">
<button class="ui-btn-main">.ui-btn-icon-search</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-follow-->
<button class="ui-btn ui-btn-icon-follow">.ui-btn-icon-follow</button>
<!-- .ui-btn-split.ui-btn-icon-follow-->
<div class="ui-btn-split ui-btn-icon-follow">
<button class="ui-btn-main">.ui-btn-icon-follow</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-unfollow-->
<button class="ui-btn ui-btn-icon-unfollow">.ui-btn-icon-unfollow</button>
<!-- .ui-btn-split.ui-btn-icon-unfollow-->
<div class="ui-btn-split ui-btn-icon-unfollow">
<button class="ui-btn-main">.ui-btn-icon-unfollow</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-print-->
<button class="ui-btn ui-btn-icon-print">.ui-btn-icon-print</button>
<!-- .ui-btn-split.ui-btn-icon-print-->
<div class="ui-btn-split ui-btn-icon-print">
<button class="ui-btn-main">.ui-btn-icon-print</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-add-folder-->
<button class="ui-btn ui-btn-icon-add-folder">.ui-btn-icon-add-folder</button>
<!-- .ui-btn-split.ui-btn-icon-add-folder-->
<div class="ui-btn-split ui-btn-icon-add-folder">
<button class="ui-btn-main">.ui-btn-icon-add-folder</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-list-->
<button class="ui-btn ui-btn-icon-list">.ui-btn-icon-list</button>
<!-- .ui-btn-split.ui-btn-icon-list-->
<div class="ui-btn-split ui-btn-icon-list">
<button class="ui-btn-main">.ui-btn-icon-list</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-business-->
<button class="ui-btn ui-btn-icon-business">.ui-btn-icon-business</button>
<!-- .ui-btn-split.ui-btn-icon-business-->
<div class="ui-btn-split ui-btn-icon-business">
<button class="ui-btn-main">.ui-btn-icon-business</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-business-confirm-->
<button class="ui-btn ui-btn-icon-business-confirm">.ui-btn-icon-business-confirm</button>
<!-- .ui-btn-split.ui-btn-icon-business-confirm-->
<div class="ui-btn-split ui-btn-icon-business-confirm">
<button class="ui-btn-main">.ui-btn-icon-business-confirm</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-business-warning-->
<button class="ui-btn ui-btn-icon-business-warning">.ui-btn-icon-business-warning</button>
<!-- .ui-btn-split.ui-btn-icon-business-warning-->
<div class="ui-btn-split ui-btn-icon-business-warning">
<button class="ui-btn-main">.ui-btn-icon-business-warning</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-camera-->
<button class="ui-btn ui-btn-icon-camera">.ui-btn-icon-camera</button>
<!-- .ui-btn-split.ui-btn-icon-camera-->
<div class="ui-btn-split ui-btn-icon-camera">
<button class="ui-btn-main">.ui-btn-icon-camera</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-phone-up-->
<button class="ui-btn ui-btn-icon-phone-up">.ui-btn-icon-phone-up</button>
<!-- .ui-btn-split.ui-btn-icon-phone-up-->
<div class="ui-btn-split ui-btn-icon-phone-up">
<button class="ui-btn-main">.ui-btn-icon-phone-up</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-phone-down-->
<button class="ui-btn ui-btn-icon-phone-down">.ui-btn-icon-phone-down</button>
<!-- .ui-btn-split.ui-btn-icon-phone-down-->
<div class="ui-btn-split ui-btn-icon-phone-down">
<button class="ui-btn-main">.ui-btn-icon-phone-down</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-back-->
<button class="ui-btn ui-btn-icon-back">.ui-btn-icon-back</button>
<!-- .ui-btn-split.ui-btn-icon-back-->
<div class="ui-btn-split ui-btn-icon-back">
<button class="ui-btn-main">.ui-btn-icon-back</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-edit-->
<button class="ui-btn ui-btn-icon-edit">.ui-btn-icon-edit</button>
<!-- .ui-btn-split.ui-btn-icon-edit-->
<div class="ui-btn-split ui-btn-icon-edit">
<button class="ui-btn-main">.ui-btn-icon-edit</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-share-->
<button class="ui-btn ui-btn-icon-share">.ui-btn-icon-share</button>
<!-- .ui-btn-split.ui-btn-icon-share-->
<div class="ui-btn-split ui-btn-icon-share">
<button class="ui-btn-main">.ui-btn-icon-share</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-remove-->
<button class="ui-btn ui-btn-icon-remove">.ui-btn-icon-remove</button>
<!-- .ui-btn-split.ui-btn-icon-remove-->
<div class="ui-btn-split ui-btn-icon-remove">
<button class="ui-btn-main">.ui-btn-icon-remove</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-download-->
<button class="ui-btn ui-btn-icon-download">.ui-btn-icon-download</button>
<!-- .ui-btn-split.ui-btn-icon-download-->
<div class="ui-btn-split ui-btn-icon-download">
<button class="ui-btn-main">.ui-btn-icon-download</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-cloud-->
<button class="ui-btn ui-btn-icon-cloud">.ui-btn-icon-cloud</button>
<!-- .ui-btn-split.ui-btn-icon-cloud-->
<div class="ui-btn-split ui-btn-icon-cloud">
<button class="ui-btn-main">.ui-btn-icon-cloud</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-page-->
<button class="ui-btn ui-btn-icon-page">.ui-btn-icon-page</button>
<!-- .ui-btn-split.ui-btn-icon-page-->
<div class="ui-btn-split ui-btn-icon-page">
<button class="ui-btn-main">.ui-btn-icon-page</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-chat-->
<button class="ui-btn ui-btn-icon-chat">.ui-btn-icon-chat</button>
<!-- .ui-btn-split.ui-btn-icon-chat-->
<div class="ui-btn-split ui-btn-icon-chat">
<button class="ui-btn-main">.ui-btn-icon-chat</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-phone-call-->
<button class="ui-btn ui-btn-icon-phone-call">.ui-btn-icon-phone-call</button>
<!-- .ui-btn-split.ui-btn-icon-phone-call-->
<div class="ui-btn-split ui-btn-icon-phone-call">
<button class="ui-btn-main">.ui-btn-icon-phone-call</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-lock-->
<button class="ui-btn ui-btn-icon-lock">.ui-btn-icon-lock</button>
<!-- .ui-btn-split.ui-btn-icon-lock-->
<div class="ui-btn-split ui-btn-icon-lock">
<button class="ui-btn-main">.ui-btn-icon-lock</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-done-->
<button class="ui-btn ui-btn-icon-done">.ui-btn-icon-done</button>
<!-- .ui-btn-split.ui-btn-icon-done-->
<div class="ui-btn-split ui-btn-icon-done">
<button class="ui-btn-main">.ui-btn-icon-done</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-disk-->
<button class="ui-btn ui-btn-icon-disk">.ui-btn-icon-disk</button>
<!-- .ui-btn-split.ui-btn-icon-disk-->
<div class="ui-btn-split ui-btn-icon-disk">
<button class="ui-btn-main">.ui-btn-icon-disk</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-mail-->
<button class="ui-btn ui-btn-icon-mail">.ui-btn-icon-mail</button>
<!-- .ui-btn-split.ui-btn-icon-mail-->
<div class="ui-btn-split ui-btn-icon-mail">
<button class="ui-btn-main">.ui-btn-icon-mail</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-alert-->
<button class="ui-btn ui-btn-icon-alert">.ui-btn-icon-alert</button>
<!-- .ui-btn-split.ui-btn-icon-alert-->
<div class="ui-btn-split ui-btn-icon-alert">
<button class="ui-btn-main">.ui-btn-icon-alert</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-angle-up-->
<button class="ui-btn ui-btn-icon-angle-up">.ui-btn-icon-angle-up</button>
<!-- .ui-btn-split.ui-btn-icon-angle-up-->
<div class="ui-btn-split ui-btn-icon-angle-up">
<button class="ui-btn-main">.ui-btn-icon-angle-up</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-angle-down-->
<button class="ui-btn ui-btn-icon-angle-down">.ui-btn-icon-angle-down</button>
<!-- .ui-btn-split.ui-btn-icon-angle-down-->
<div class="ui-btn-split ui-btn-icon-angle-down">
<button class="ui-btn-main">.ui-btn-icon-angle-down</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-dots-->
<button class="ui-btn ui-btn-icon-dots">.ui-btn-icon-dots</button>
<!-- .ui-btn-split.ui-btn-icon-dots-->
<div class="ui-btn-split ui-btn-icon-dots">
<button class="ui-btn-main">.ui-btn-icon-dots</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-forward-->
<button class="ui-btn ui-btn-icon-forward">.ui-btn-icon-forward</button>
<!-- .ui-btn-split.ui-btn-icon-forward-->
<div class="ui-btn-split ui-btn-icon-forward">
<button class="ui-btn-main">.ui-btn-icon-forward</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-fail-->
<button class="ui-btn ui-btn-icon-fail">.ui-btn-icon-fail</button>
<!-- .ui-btn-split.ui-btn-icon-fail-->
<div class="ui-btn-split ui-btn-icon-fail">
<button class="ui-btn-main">.ui-btn-icon-fail</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-success-->
<button class="ui-btn ui-btn-icon-success">.ui-btn-icon-success</button>
<!-- .ui-btn-split.ui-btn-icon-success-->
<div class="ui-btn-split ui-btn-icon-success">
<button class="ui-btn-main">.ui-btn-icon-success</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-plan-->
<button class="ui-btn ui-btn-icon-plan">.ui-btn-icon-plan</button>
<!-- .ui-btn-split.ui-btn-icon-plan-->
<div class="ui-btn-split ui-btn-icon-plan">
<button class="ui-btn-main">.ui-btn-icon-plan</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-eye-opened-->
<button class="ui-btn ui-btn-icon-eye-opened">.ui-btn-icon-eye-opened</button>
<!-- .ui-btn-split.ui-btn-icon-eye-opened-->
<div class="ui-btn-split ui-btn-icon-eye-opened">
<button class="ui-btn-main">.ui-btn-icon-eye-opened</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-eye-closed-->
<button class="ui-btn ui-btn-icon-eye-closed">.ui-btn-icon-eye-closed</button>
<!-- .ui-btn-split.ui-btn-icon-eye-closed-->
<div class="ui-btn-split ui-btn-icon-eye-closed">
<button class="ui-btn-main">.ui-btn-icon-eye-closed</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-tariff-->
<button class="ui-btn ui-btn-icon-tariff">.ui-btn-icon-tariff</button>
<!-- .ui-btn-split.ui-btn-icon-tariff-->
<div class="ui-btn-split ui-btn-icon-tariff">
<button class="ui-btn-main">.ui-btn-icon-tariff</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-battery-->
<button class="ui-btn ui-btn-icon-battery">.ui-btn-icon-battery</button>
<!-- .ui-btn-split.ui-btn-icon-battery-->
<div class="ui-btn-split ui-btn-icon-battery">
<button class="ui-btn-main">.ui-btn-icon-battery</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-no-battery-->
<button class="ui-btn ui-btn-icon-no-battery">.ui-btn-icon-no-battery</button>
<!-- .ui-btn-split.ui-btn-icon-no-battery-->
<div class="ui-btn-split ui-btn-icon-no-battery">
<button class="ui-btn-main">.ui-btn-icon-no-battery</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-half-battery-->
<button class="ui-btn ui-btn-icon-half-battery">.ui-btn-icon-half-battery</button>
<!-- .ui-btn-split.ui-btn-icon-half-battery-->
<div class="ui-btn-split ui-btn-icon-half-battery">
<button class="ui-btn-main">.ui-btn-icon-half-battery</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-low-battery-->
<button class="ui-btn ui-btn-icon-low-battery">.ui-btn-icon-low-battery</button>
<!-- .ui-btn-split.ui-btn-icon-low-battery-->
<div class="ui-btn-split ui-btn-icon-low-battery">
<button class="ui-btn-main">.ui-btn-icon-low-battery</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-crit-battery-->
<button class="ui-btn ui-btn-icon-crit-battery">.ui-btn-icon-crit-battery</button>
<!-- .ui-btn-split.ui-btn-icon-crit-battery-->
<div class="ui-btn-split ui-btn-icon-crit-battery">
<button class="ui-btn-main">.ui-btn-icon-crit-battery</button>
<button class="ui-btn-menu"></button>
</div>
| |
<!-- .ui-btn.ui-btn-icon-demo-->
<button class="ui-btn ui-btn-icon-demo">.ui-btn-icon-demo</button>
<!-- .ui-btn-split.ui-btn-icon-demo-->
<div class="ui-btn-split ui-btn-icon-demo">
<button class="ui-btn-main">.ui-btn-icon-demo</button>
<button class="ui-btn-menu"></button>
</div>
|
© «Bitrix24», 2001-2024