Icon - LuccaSA/lucca-ui GitHub Wiki

All icons used in Lucca-UI come from the "lucca-icons" font that comes with the framework, courtesy of Lucca. If you don't want/need it, just add @enable: false to your theme's icon.overrides.less file.

The icon element, from v.1.1.0 and up, comes from the "lucca-icons" bower component

Displaying an icon

Using classes

In order to display an icon, you have to add three css classes to a <i></i> element : lui icon {nameOfTheIcon} (N.B.: {nameOfTheIcon} can consist of multiple words, such as "arrow north").

To get the actual name of the icon you want to display, you can check the cheatsheet on the demo page.

Example:

<button class="lui button"><i class="lui edit icon"></i>Edit</button>

Using the mixin

You can add the icon to an element directly in your less file with the .lui_make_icon(@iconName, @position) mixin.

The mixin takes two parameters : (1) the actual registered name of the icon (cf the demo page) and (2) the position of the icon ("left" or "right"), which defaults to left.

Example

.edit-button {
    .lui_make_icon(edit, right);
}

Using attributes

Finally, displaying an icon can be achieved by giving your element a lui-icon="{iconCharacterCode}" attribute.

All icons were made by the Lucca designer team. Thanks to Clotilde Martin Lemerle and Léa Mendes !