Action Icons

Action Icons are used to perform a certain list of actions within a title, list or in any element using icons.

Demo 1 Demo 2 Demo 3 Demo 4 Demo 5

Action icons can also contain dropdowns. Below is the example with basic icon links and dropdown.

<div class="actions">
    <a href="" class="actions__item zmdi zmdi-trending-up"></a>
    <a href="" class="actions__item zmdi zmdi-check-all"></a>

    <div class="dropdown actions__item">
        <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
        <div class="dropdown-menu dropdown-menu-right">
            <a href="" class="dropdown-item">Refresh</a>
            <a href="" class="dropdown-item">Manage Widgets</a>
            <a href="" class="dropdown-item">Settings</a>
        </div>
    </div>
</div>


To override position of the action-icons, you can simply add a modifier class on .actions and customize it as per your need.

e.g HTML

<div class="actions actions--list">
   ...
</div>


e.g CSS

.actions--list {
    float: right;
    margin-top: 10px;
    ...
}

Requirements:

  • /scss/inc/_misc.scss