Check with your designers to help you design this section
Check with your designers to help you design this section
RAUL includes 4000 icons to cover the needs of your application. We tried to combine best of both font icons and svg icons. RAUL uses custom elements to achieve icon font-style markup, but inlines an svg so users don't pay the download penalty of such an extensive libraryi and icons can still be styled via inherited classes. Similar to icon fonts, RAUL icons display inline with a height, width and color that matches the surrounding text.
Markup for icons is: <ui-icon icon="name-of-icon"></ui-icon>
.
Icons display inline with a height and width that matches the font-size,
and aligns to the baseline.'
<h1><ui-icon icon="add-circle-1"></ui-icon> Matches the h1 text size</h1>
<h2><ui-icon icon="add-circle-1"></ui-icon> Matches the h2 text size</h2>
<h3><ui-icon icon="add-circle-1"></ui-icon> Matches the h3 text size</h3>
<h3><ui-icon icon="add-circle-1" class="text-success"></ui-icon> Styleable via classes</h3>
<button class="button button-primary">
<ui-icon icon="add-circle-1"></ui-icon> Inherits Text Color
</button>
<button class="button button-text">
<ui-icon icon="add-circle-1"></ui-icon> Inherits Text Color
</button>
Use .icon-big .icon-bigger .icon-biggest
classes
to size icons relative to surrounding text.
<h3><ui-icon icon="camera-1"></ui-icon> Normal</h3>
<h3><ui-icon icon="camera-1" class="icon-big"></ui-icon> .icon-big</h3>
<h3><ui-icon icon="camera-1" class="icon-bigger"></ui-icon> .icon-bigger</h3>
<h3><ui-icon icon="camera-1" class="icon-biggest"></ui-icon> .icon-biggest</h3>
Adding .icon-responsive
class causes the icon to displays as a block element,
expanding to the size of it's container.
<div class="row">
<div class="col-2">
<ui-icon icon="camera-1" class="icon-responsive"></ui-icon>
</div>
<div class="col-2">
<ui-icon icon="coffee-cup-1" class="icon-responsive"></ui-icon>
</div>
<div class="col-2">
<ui-icon icon="bank-2" class="icon-responsive"></ui-icon>
</div>
</div>
Here are all the icons in the CDN. This is work in progress. We'll be making it easier to search and find icons.