Glyph List
Highly customized unordered lists of bullets. Text Lists are more dependent upon HTML and CSS resets than other elements, particularly to control indents. For additional elements that use a list-bullet, see the link-bullet page. Pseudo classes for space :before and :after are available in space-padding and space-margin.
bullet-[symbol]
- list item 1
- list item 2
- list item 3
bullet-dot or copy/paste this • symbol. This is the default bullet symbol.
- list item 1
- list item 2
- list item 3
bullet-dash or copy/paste this – symbol.
- list item 1
- list item 2
- list item 3
bullet-slash or copy/paste this ∕ symbol.
- list item 1
- list item 2
- list item 3
bullet-solidus or copy/paste this / symbol.
- list item 1
- list item 2
- list item 3
bullet-triangle or copy/paste this ‣ symbol.
- list item 1
- list item 2
- list item 3
bullet-arrow-double or copy/paste this » symbol.
- list item 1
- list item 2
- list item 3
bullet-arrow-double-back or copy/paste this « symbol.
- list item 1
- list item 2
- list item 3
bullet-arrow-single or copy/paste this › symbol.
- list item 1
- list item 2
- list item 3
bullet-arrow or copy/paste this → symbol.
- list item 1
- list item 2
- list item 3
bullet-arrow-down or copy/paste this ↓ symbol.
- list item 1
- list item 2
- list item 3
bullet-arrow-left or copy/paste this ← symbol.
- list item 1
- list item 2
- list item 3
bullet-arrow-up or copy/paste this ↑ symbol.
- list item 1
- list item 2
- list item 3
bullet-x or copy/paste this ✗ symbol.
- list item 1
- list item 2
- list item 3
bullet-check or copy/paste this ✓ symbol.
<ul class="list-bullet bullet-check>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
This is a <ul> list with customized bullets. The look of these bullets may vary across different browsers and devices. Create a <ul> tag that contains <li> tags, and apply the list-bullet class. Add a style such as bullet-check class to the <ul> to change the symbol character.