Icon Size

Use size utility to adjust icon sizes and placement next to text.

List Icon Size Utility

A list size utility sets a text size percentage relative to the base text size of a standard list, and may also tweak bullet or number placement. Create a <ul> tag and apply the optional .evo-list class. Add a list size class such as .list-size-small. Default list styles are set in _variables.scss.

• list item 1
• list item 2
• list item 3

<ul class="evo-icon-list icon-size-xxx-large">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

• list item 1
• list item 2
• list item 3

<ul class="evo-icon-list icon-size-xx-large">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

• list item 1
• list item 2
• list item 3

<ul class="evo-icon-list icon-size-x-large">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

• list item 1
• list item 2
• list item 3

<ul class="levo-icon-list icon-size-large">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

• list item 1
• list item 2
• list item 3

<ul class="evo-icon-list icon-size-medium">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

icon-size-medium is equal to the default icon list size.

• list item 1
• list item 2
• list item 3

<ul class="evo-icon-list icon-size-small">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

• list item 1
• list item 2
• list item 3

<ul class="evo-icon-list icon-size-x-small">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

• list item 1
• list item 2
• list item 3

<ul class="evo-icon-list icon-size-xx-small">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>