Glyph

This is a curated selection of unicode glyphs that may be helpful to your design. For additional elements that use unicode glyphs, see the link-bullet page. Note that useful pseudo classes for space :before and :after are available in space-padding and space-margin.

Available Core Glyphs

Copy and paste any of the glyphs above and place them alongside or in lieu of text. They will act like any text character and can be resized or colorized just as normal text..

mix examples

bullet-gray

<ul class="list-bullet bullet-x bullet-gray text-inverse">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>

Gray bullets demonstrated on inverse background. With this approach, apply the text-inverse class directly to the <ul> tag to change all the text, plus add a bullet-gray class to override the inverse color with gray colored bullets.

• × list item 1
• × list item 2
• × list item 3
• × list item 4

<ul class="evo-list">
<li>× list item 1</li>
<li>× list item 2</li>
<li>× list item 3</li>
</ul>

Just the HTML times symbol × for copy/paste into your text. Great for use as a close icon.

glyph mix examples

<a href="#" class="evo-link"><div class="evo-white text-size-10 padding-3 text-center evo-box box-0 box-circle size-15 evo-color-bg">☞
</div></a>