Icons
ridestyler.ui includes its own custom set of icons that you can use in your interface.
<i class="icon icon-arrow-right"></i>
Add a icon class and the correct icon-[name] class to an element to display an icon using a pseudo :before element.
Font Awesome
All of the icons from have been included. Use their website or browse the /src/icons/font-awesome-solid folder to discover icon names.
icon-arrow-up
icon-arrow-right
icon-arrow-down
icon-arrow-left
icon-angle-double-up
icon-angle-double-right
icon-angle-double-down
icon-angle-double-left
icon-shopping-cart
icon-user-secret
icon-biohazard
icon-sd-card
icon-pizza-slice
Custom icons
Custom icons can easily be added in the future by adding them to the src/icons folder and rebuilding the fonts.
Icon sizes
Use icon-2x, icon-3x and icon-4x classes to increase icon sizes.
You can set font-size to have different icon sizes.
icon-2x (2rem)
icon-3x (3rem)
icon-4x (4rem)
<i class="icon icon-2x icon-camera-retro"></i>
SCSS Enhancements
A variable containing the unicode value for each icon is included and can be used in place of the .icon classes.
To use the custom variables extend the %icon placeholder selector (or add the font-family: 'rsui-icons'; to your class), and
use the variable in the :before or :after pseudo-class.
.my-custom-icon {
@extend %icon;
&:before {
content: $icon-code-camera-retro;
}
}All Icons
ad
address-book
address-card
adjust
air-freshener
align-center
align-justify
align-left
align-right
allergies
ambulance
american-sign-language-interpreting
anchor
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
angry
ankh
apple-alt
archive
archway
arrow-alt-circle-down
arrow-alt-circle-left
arrow-alt-circle-right
arrow-alt-circle-up
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows-alt-h
arrows-alt-v
arrows-alt
assistive-listening-systems
asterisk
at
atlas
atom
audio-description
award
baby-carriage
baby
backspace
backward
bacon
balance-scale-left
balance-scale-right
balance-scale
ban
band-aid
barcode
bars
baseball-ball
basketball-ball
bath
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
bed
beer
bell-slash
bell
bezier-curve
bible
bicycle
biking
binoculars
biohazard
birthday-cake
blender-phone
blender
blind
blog
bold
bolt
bomb
bone
bong
book-dead
book-medical
book-open
book-reader
book
bookmark
border-all
border-none
border-style
bowling-ball
box-open
box
boxes
braille
brain
bread-slice
briefcase-medical
briefcase
broadcast-tower
broom
brush
bug
building
bullhorn
bullseye
burn
bus-alt
bus
business-time
calculator
calendar-alt
calendar-check
calendar-day
calendar-minus
calendar-plus
calendar-times
calendar-week
calendar
camera-retro
camera
campground
candy-cane
cannabis
capsules
car-alt
car-battery
car-crash
car-side
car
caret-down
caret-left
caret-right
caret-square-down
caret-square-left
caret-square-right
caret-square-up
caret-up
carrot
cart-arrow-down
cart-plus
cash-register
cat
certificate
chair
chalkboard-teacher
chalkboard
charging-station
chart-area
chart-bar
chart-line
chart-pie
check-circle
check-double
check-square
check
cheese
chess-bishop
chess-board
chess-king
chess-knight
chess-pawn
chess-queen
chess-rook
chess
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
child
church
circle-notch
circle
city
clinic-medical
clipboard-check
clipboard-list
clipboard
clock
clone
closed-captioning
cloud-download-alt
cloud-meatball
cloud-moon-rain
cloud-moon
cloud-rain
cloud-showers-heavy
cloud-sun-rain
cloud-sun
cloud-upload-alt
cloud
cocktail
code-branch
code
coffee
cog
cogs
coins
columns
comment-alt
comment-dollar
comment-dots
comment-medical
comment-slash
comment
comments-dollar
comments
compact-disc
compass
compress-arrows-alt
compress
concierge-bell
cookie-bite
cookie
copy
copyright
couch
credit-card
crop-alt
crop
cross
crosshairs
crow
crown
crutch
cube
cubes
cut
database
deaf
democrat
desktop
dharmachakra
diagnoses
dice-d20
dice-d6
dice-five
dice-four
dice-one
dice-six
dice-three
dice-two
dice
digital-tachograph
directions
divide
dizzy
dna
dog
dollar-sign
dolly-flatbed
dolly
donate
door-closed
door-open
dot-circle
dove
download
drafting-compass
dragon
draw-polygon
drum-steelpan
drum
drumstick-bite
dumbbell
dumpster-fire
dumpster
dungeon
edit
egg
eject
ellipsis-h
ellipsis-v
envelope-open-text
envelope-open
envelope-square
envelope
equals
eraser
ethernet
euro-sign
exchange-alt
exclamation-circle
exclamation-triangle
exclamation
expand-arrows-alt
expand
external-link-alt
external-link-square-alt
eye-dropper
eye-slash
eye
fan
fast-backward
fast-forward
fax
feather-alt
feather
female
fighter-jet
file-alt
file-archive
file-audio
file-code
file-contract
file-csv
file-download
file-excel
file-export
file-image
file-import
file-invoice-dollar
file-invoice
file-medical-alt
file-medical
file-pdf
file-powerpoint
file-prescription
file-signature
file-upload
file-video
file-word
file
fill-drip
fill
film
filter
fingerprint
fire-alt
fire-extinguisher
fire
first-aid
fish
fist-raised
flag-checkered
flag-usa
flag
flask
flushed
folder-minus
folder-open
folder-plus
folder
font-awesome-logo-full
font
football-ball
forward
frog
frown-open
frown
funnel-dollar
futbol
gamepad
gas-pump
gavel
gem
genderless
ghost
gift
gifts
glass-cheers
glass-martini-alt
glass-martini
glass-whiskey
glasses
globe-africa
globe-americas
globe-asia
globe-europe
globe
golf-ball
gopuram
graduation-cap
greater-than-equal
greater-than
grimace
grin-alt
grin-beam-sweat
grin-beam
grin-hearts
grin-squint-tears
grin-squint
grin-stars
grin-tears
grin-tongue-squint
grin-tongue-wink
grin-tongue
grin-wink
grin
grip-horizontal
grip-lines-vertical
grip-lines
grip-vertical
guitar
h-square
hamburger
hammer
hamsa
hand-holding-heart
hand-holding-usd
hand-holding
hand-lizard
hand-middle-finger
hand-paper
hand-peace
hand-point-down
hand-point-left
hand-point-right
hand-point-up
hand-pointer
hand-rock
hand-scissors
hand-spock
hands-helping
hands
handshake
hanukiah
hard-hat
hashtag
hat-cowboy-side
hat-cowboy
hat-wizard
haykal
hdd
heading
headphones-alt
headphones
headset
heart-broken
heart
heartbeat
helicopter
highlighter
hiking
hippo
history
hockey-puck
holly-berry
home
horse-head
horse
hospital-alt
hospital-symbol
hospital
hot-tub
hotdog
hotel
hourglass-end
hourglass-half
hourglass-start
hourglass
house-damage
hryvnia
i-cursor
ice-cream
icicles
icons
id-badge
id-card-alt
id-card
igloo
image
images
inbox
indent
industry
infinity
info-circle
info
italic
jedi
joint
journal-whills
kaaba
key
keyboard
khanda
kiss-beam
kiss-wink-heart
kiss
kiwi-bird
landmark
language
laptop-code
laptop-medical
laptop
laugh-beam
laugh-squint
laugh-wink
laugh
layer-group
leaf
lemon
less-than-equal
less-than
level-down-alt
level-up-alt
life-ring
lightbulb
link
lira-sign
list-alt
list-ol
list-ul
list
location-arrow
lock-open
lock
long-arrow-alt-down
long-arrow-alt-left
long-arrow-alt-right
long-arrow-alt-up
low-vision
luggage-cart
magic
magnet
mail-bulk
male
map-marked-alt
map-marked
map-marker-alt
map-marker
map-pin
map-signs
map
marker
mars-double
mars-stroke-h
mars-stroke-v
mars-stroke
mars
mask
medal
medkit
meh-blank
meh-rolling-eyes
meh
memory
menorah
mercury
meteor
microchip
microphone-alt-slash
microphone-alt
microphone-slash
microphone
microscope
minus-circle
minus-square
minus
mitten
mobile-alt
mobile
money-bill-alt
money-bill-wave-alt
money-bill-wave
money-bill
money-check-alt
money-check
monument
moon
mortar-pestle
mosque
motorcycle
mountain
mouse-pointer
mouse
mug-hot
music
network-wired
neuter
newspaper
not-equal
notes-medical
object-group
object-ungroup
oil-can
om
otter
outdent
pager
paint-brush
paint-roller
palette
pallet
paper-plane
paperclip
parachute-box
paragraph
parking
passport
pastafarianism
paste
pause-circle
pause
paw
peace
pen-alt
pen-fancy
pen-nib
pen-square
pen
pencil-alt
pencil-ruler
people-carry
pepper-hot
percent
percentage
person-booth
phone-alt
phone-slash
phone-square-alt
phone-square
phone-volume
phone
photo-video
piggy-bank
pills
pizza-slice
place-of-worship
plane-arrival
plane-departure
plane
play-circle
play
plug
plus-circle
plus-square
plus
podcast
poll-h
poll
poo-storm
poo
poop
portrait
pound-sign
power-off
pray
praying-hands
prescription-bottle-alt
prescription-bottle
prescription
procedures
project-diagram
puzzle-piece
qrcode
question-circle
question
quidditch
quote-left
quote-right
quran
radiation-alt
radiation
rainbow
random
receipt
record-vinyl
recycle
redo-alt
redo
registered
remove-format
reply-all
reply
republican
restroom
retweet
ribbon
ring
road
robot
rocket
route
rss-square
rss
ruble-sign
ruler-combined
ruler-horizontal
ruler-vertical
ruler
running
rupee-sign
sad-cry
sad-tear
satellite-dish
satellite
save
school
screwdriver
scroll
sd-card
search-dollar
search-location
search-minus
search-plus
search
seedling
server
shapes
share-alt-square
share-alt
share-square
share
shekel-sign
shield-alt
ship
shipping-fast
shoe-prints
shopping-bag
shopping-basket
shopping-cart
shower
shuttle-van
sign-in-alt
sign-language
sign-out-alt
sign
signal
signature
sim-card
sitemap
skating
skiing-nordic
skiing
skull-crossbones
skull
slash
sleigh
sliders-h
smile-beam
smile-wink
smile
smog
smoking-ban
smoking
sms
snowboarding
snowflake
snowman
snowplow
socks
solar-panel
sort-alpha-down-alt
sort-alpha-down
sort-alpha-up-alt
sort-alpha-up
sort-amount-down-alt
sort-amount-down
sort-amount-up-alt
sort-amount-up
sort-down
sort-numeric-down-alt
sort-numeric-down
sort-numeric-up-alt
sort-numeric-up
sort-up
sort
spa
space-shuttle
spell-check
spider
spinner
splotch
spray-can
square-full
square-root-alt
square
stamp
star-and-crescent
star-half-alt
star-half
star-of-david
star-of-life
star
step-backward
step-forward
stethoscope
sticky-note
stop-circle
stop
stopwatch
store-alt
store
stream
street-view
strikethrough
stroopwafel
subscript
subway
suitcase-rolling
suitcase
sun
superscript
surprise
swatchbook
swimmer
swimming-pool
synagogue
sync-alt
sync
syringe
table-tennis
table
tablet-alt
tablet
tablets
tachometer-alt
tag
tags
tape
tasks
taxi
teeth-open
teeth
temperature-high
temperature-low
tenge
terminal
text-height
text-width
th-large
th-list
th
theater-masks
thermometer-empty
thermometer-full
thermometer-half
thermometer-quarter
thermometer-three-quarters
thermometer
thumbs-down
thumbs-up
thumbtack
ticket-alt
times-circle
times
tint-slash
tint
tired
toggle-off
toggle-on
toilet-paper
toilet
toolbox
tools
tooth
torah
torii-gate
tractor
trademark
traffic-light
train
tram
transgender-alt
transgender
trash-alt
trash-restore-alt
trash-restore
trash
tree
trophy
truck-loading
truck-monster
truck-moving
truck-pickup
truck
tshirt
tty
tv
umbrella-beach
umbrella
underline
undo-alt
undo
universal-access
university
unlink
unlock-alt
unlock
upload
user-alt-slash
user-alt
user-astronaut
user-check
user-circle
user-clock
user-cog
user-edit
user-friends
user-graduate
user-injured
user-lock
user-md
user-minus
user-ninja
user-nurse
user-plus
user-secret
user-shield
user-slash
user-tag
user-tie
user-times
user
users-cog
users
utensil-spoon
utensils
vector-square
venus-double
venus-mars
venus
vial
vials
video-slash
video
vihara
voicemail
volleyball-ball
volume-down
volume-mute
volume-off
volume-up
vote-yea
vr-cardboard
walking
wallet
warehouse
water
wave-square
weight-hanging
weight
wheelchair
wifi
wind
window-close
window-maximize
window-minimize
window-restore
wine-bottle
wine-glass-alt
wine-glass
won-sign
wrench
x-ray
yen-sign
yin-yang