Styled Lists

Easily add icons to your lists

Just about every site out there has lists, so we wanted lists in Pax to have a little extra pop. Pax’s list and list_item shortcodes let you choose from over 200 icons to add visual interest. You can create a list where all the items have the same icon, or you can add a different icon for each list item — it’s entirely up to you!

The List Icons

glass

music

search

envelope

heart

star

star-empty

user

film

th-large

th

th-list

ok

remove

zoom-in

zoom-out

off

signal

cogs

cog

trash

home

file

time

road

download-alt

download

upload

inbox

play-circle

repeat

refresh

list-alt

lock

flag

headphones

volume-off

external-link

thumbs-down

comments

copy

cut

dashboard

envelope-alt

facebook

filter

fullscreen

github

globe

google-plus-sign

google-plus

group

underline

volume-down

qrcode

barcode

tag

tags

book

bookmark

print

camera

font

bold

italic

text-height

text-width

align-left

align-center

align-right

align-justify

pushpin

trophy

list

indent-left

indent-right

facetime-video

picture

pencil

map-marker

adjust

tint

edit

share

check

move

step-backward

fast-backward

backward

play

pause

key

upload-alt

hand-down

hand-left

hand-right

hand-up

hdd

legal

link

linkedin

list-ol

list-ul

magic

money

stop

forward

fast-forward

step-forward

eject

chevron-left

chevron-right

plus-sign

minus-sign

remove-sign

ok-sign

question-sign

info-sign

screenshot

remove-circle

ok-circle

ban-circle

arrow-left

thumbs-up

lemon

arrow-right

arrow-up

arrow-down

share-alt

resize-full

esize-small

plus

minus

asterisk

exclamation-sign

gift

leaf

fire

eye-open

eye-close

warning-sign

plane

calendar

signin

signout

paper-clip

paste

phone-sign

phone

pinterest-sign

pinterest

reorder

rss

unlock

user-md

wrench

undo

random

comment

magnet

chevron-up

chevron-down

retweet

shopping-cart

resize-vertical

resize-horizontal

folder-close

folder-open

camera-retro

bar-chart

heart-empty

twitter-sign

linkedin-sign

github-sign

facebook-sign

star-half

beaker

bell

bolt

bookmark-empty

briefcase

bullhorn

caret-down

caret-left

caret-right

caret-up

certificate

check-empty

circle-arrow-down

circle-arrow-left

circle-arrow-right

circle-arrow-up

cloud

columns

comment-alt

comments-alt

credit-card

save

sign-blank

sitemap

sort-down

sort-up

sort

strikethrough

table

tasks

truck

twitter

umbrella

The Code

<!-- All the items in this list will have the same icon -->
[list icon="ok"]
[list_item]Item #1[/list_item]
[list_item]Item #2[/list_item]
[/list]
<!-- All the items in this list will have a different icon -->
[list]
[list_item icon="folder-open"]stop[/list_item]
[list_item icon="folder-close"]forward[/list_item]
[/list]

The Options

icon – which icon you want to display. You can set this on both the [list] and [list_item] shortcodes. The icon value set on the [list_item] takes precedence over the icon value set on on the [list].