Glyph Link
Glyph styles for links. Evo link bullet styles can be adjusted from _evo_variables.scss. Regular link bullets will inherit styles from the link text. See the list-bullet page for more link-[style] options.
Evo Link Bullet
Evo link with default bullet<a class="evo-link-bullet" href="javascript:void(0);">Evo link with default bullet</a>
Apply evo-link-bullet to an <a> tag.
<a class="evo-link-bullet link-check" href="javascript:void(0);">Evo link with modified bullet</a>
Add any link-[style] such as link-check to change the bullet icon.
<ul class="evo-list>
<li class="evo-link-bullet" href="#">list item 1</li>
<li class="evo-link-bullet" href="#">list item 2</li>
<li class="evo-link-bullet" href="#">list item 3</li>
</ul>
If this is within an unordered list, use the evo-list class on the <ul> tag, and evo-link-bullet class on the <a> tags. Place the <a> tags inside the <li> items, as shown in the example.
<ul class="evo-list>
<li class="evo-link-bullet link-check" href="#">list item 1</li>
<li class="evo-link-bullet link-check" href="#">list item 2</li>
<li class="evo-link-bullet link-check" href="#">list item 3</li>
</ul>
Add any link-[style] such as link-check to change the bullet icon.
Link Bullet
Link with default bullet<a class="link-bullet" href="javascript:void(0);">Link with default bullet</a>
Apply link-bullet to an <a> tag.
<a class="link-bullet link-check" href="javascript:void(0);">Link with modified bullet</a>
Add any link-[style] such as link-check to change the bullet icon.
<a class="link-check padding-right-8-before" href="javascript:void(0);">Alternate link bullet approach</a>
Apply any link-[style] such as link-check, then add a 'padding-right-[number]-before' class such as padding-right-8-before. These special 'before' padding classes range from number 0 to 25.
<a class="link-arrow-after padding-left-5-after padding-left-10-hover-after transition-5" href="javascript:void(0);">Alternate link bullet approach</a>
Glyph icon on the right.
Bullet Link Example
Back to Index<a class="evo-link-bullet link-arrow-double-back text-size-3" href="javascript:void(0);">Evo link with default bullet</a>
Apply evo-link-bullet and link-arrow-double-backto an <a> tag.
<ul class="evo-list text-size-6">
<li><a class="link-check padding-right-8-before link-color" href="#"><span class="link-dashed">list item 1</span></a></li>
<li><a class="link-check padding-right-8-before link-color" href="#"><span class="link-dashed">list item 2</span></a></li>
<li><a class="link-check padding-right-8-before link-color" href="#"><span class="link-dashed">list item 3</span></a></li>
</ul>
Try mixing link-bullet styles with styles from the list-bullet or link-style pages.
Link Bullet Copy/Paste
Link with bullet copy/pasted in →<a href="javascript:void(0);">Link with default bullet →</a>
Apply link-bullet to an <a> tag and paste a glyph directly into the text, along with a non-breaking space.