Документация для разработчиков
Документация для разработчиков Документация по D7 Документация по REST Пользовательская документация
Темная тема

Кнопки с иконками

Описание и пример

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

Эта библиотека является дополнением к ui.buttons. Это означает, что принципы работы модификаторов ничем не отличаются от основной библиотеки.

Пример. Код для кнопок.

выглядит так: 

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

<!-- .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 class="ui-btn-menu"></button> 
</div>

Кнопка с иконкой без текста

Если вам нужна кнопка только с иконкой, внутри кнопки не должно быть даже пробела, при этом кнопка не может быть тегом <input>. В противном случае псевдокласс :empty не отработает, а кнопка визуально будет выглядеть криво.

<!-- .ui-btn.ui-btn-icon-add:empty -->
<button class="ui-btn ui-btn-icon-add"></button>

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

Список иконок

КнопкаКод

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


© «Битрикс», 2001-2024, «1С-Битрикс», 2024