Feather
Quote as Font-class
Font-class is one kind of derived usage of Unicode, which solved the problems of intuitive writing and semantic ambiguity
Compared with Unicode, its characteristics as following:
- Good compatibility, it supports IE 8+ and all usual browsers.
- When you want to change one icon, you just need to alter the quote of Unicode in class, because it define icons by “class”.
- But its one kind of font essentially, it can not support multi-color icon as well.
Usage:
Step 1: Include the css of iconfont
<link rel="stylesheet" type="text/css" href="./iconfont.css">Step 2: Copy the individual code of icon into pages
<i class="feather icon-xxx"></i>-
alert-octagon.icon-alert-octagon
-
alert-circle.icon-alert-circle
-
activity.icon-activity
-
alert-triangle.icon-alert-triangle
-
align-center.icon-align-center
-
airplay.icon-airplay
-
align-justify.icon-align-justify
-
align-left.icon-align-left
-
align-right.icon-align-right
-
arrow-down-left.icon-arrow-down-left
-
arrow-down-right.icon-arrow-down-right
-
anchor.icon-anchor
-
aperture.icon-aperture
-
arrow-left.icon-arrow-left
-
arrow-right.icon-arrow-right
-
arrow-down.icon-arrow-down
-
arrow-up-left.icon-arrow-up-left
-
arrow-up-right.icon-arrow-up-right
-
arrow-up.icon-arrow-up
-
award.icon-award
-
bar-chart.icon-bar-chart
-
at-sign.icon-at-sign
-
bar-chart-2.icon-bar-chart-
-
battery-charging.icon-battery-charging
-
bell-off.icon-bell-off
-
battery.icon-battery
-
bluetooth.icon-bluetooth
-
bell.icon-bell
-
book.icon-book
-
briefcase.icon-briefcase
-
camera-off.icon-camera-off
-
calendar.icon-calendar
-
bookmark.icon-bookmark
-
box.icon-box
-
camera.icon-camera
-
check-circle.icon-check-circle
-
check.icon-check
-
check-square.icon-check-square
-
cast.icon-cast
-
chevron-down.icon-chevron-down
-
chevron-left.icon-chevron-left
-
chevron-right.icon-chevron-right
-
chevron-up.icon-chevron-up
-
chevrons-down.icon-chevrons-down
-
chevrons-right.icon-chevrons-right
-
chevrons-up.icon-chevrons-up
-
chevrons-left.icon-chevrons-left
-
circle.icon-circle
-
clipboard.icon-clipboard
-
chrome.icon-chrome
-
clock.icon-clock
-
cloud-lightning.icon-cloud-lightning
-
cloud-drizzle.icon-cloud-drizzle
-
cloud-rain.icon-cloud-rain
-
cloud-off.icon-cloud-off
-
codepen.icon-codepen
-
cloud-snow.icon-cloud-snow
-
compass.icon-compass
-
copy.icon-copy
-
corner-down-right.icon-corner-down-right
-
corner-down-left.icon-corner-down-left
-
corner-left-down.icon-corner-left-down
-
corner-left-up.icon-corner-left-up
-
corner-up-left.icon-corner-up-left
-
corner-up-right.icon-corner-up-right
-
corner-right-down.icon-corner-right-down
-
corner-right-up.icon-corner-right-up
-
cpu.icon-cpu
-
credit-card.icon-credit-card
-
crosshair.icon-crosshair
-
disc.icon-disc
-
delete.icon-delete
-
download-cloud.icon-download-cloud
-
download.icon-download
-
droplet.icon-droplet
-
edit-2.icon-edit-
-
edit.icon-edit
-
edit-3.icon-edit-1
-
external-link.icon-external-link
-
eye.icon-eye
-
feather.icon-feather
-
facebook.icon-facebook
-
file-minus.icon-file-minus
-
eye-off.icon-eye-off
-
fast-forward.icon-fast-forward
-
file-text.icon-file-text
-
film.icon-film
-
file.icon-file
-
file-plus.icon-file-plus
-
folder.icon-folder
-
filter.icon-filter
-
flag.icon-flag
-
globe.icon-globe
-
grid.icon-grid
-
heart.icon-heart
-
home.icon-home
-
github.icon-github
-
image.icon-image
-
inbox.icon-inbox
-
layers.icon-layers
-
info.icon-info
-
instagram.icon-instagram
-
layout.icon-layout
-
link-2.icon-link-
-
life-buoy.icon-life-buoy
-
link.icon-link
-
log-in.icon-log-in
-
list.icon-list
-
lock.icon-lock
-
log-out.icon-log-out
-
loader.icon-loader
-
mail.icon-mail
-
maximize-2.icon-maximize-2
-
map.icon-map
-
maximize.icon-maximize
-
map-pin.icon-map-pin
-
menu.icon-menu
-
message-circle.icon-message-circle
-
message-square.icon-message-square
-
minimize-2.icon-minimize-
-
minimize.icon-minimize
-
mic-off.icon-mic-off
-
minus-circle.icon-minus-circle
-
mic.icon-mic
-
minus-square.icon-minus-square
-
minus.icon-minus
-
moon.icon-moon
-
monitor.icon-monitor
-
more-vertical.icon-more-vertical
-
more-horizontal.icon-more-horizontal
-
move.icon-move
-
music.icon-music
-
navigation-2.icon-navigation-
-
navigation.icon-navigation
-
octagon.icon-octagon
-
package.icon-package
-
pause-circle.icon-pause-circle
-
pause.icon-pause
-
percent.icon-percent
-
phone-call.icon-phone-call
-
phone-forwarded.icon-phone-forwarded
-
phone-missed.icon-phone-missed
-
phone-off.icon-phone-off
-
phone-incoming.icon-phone-incoming
-
phone.icon-phone
-
phone-outgoing.icon-phone-outgoing
-
pie-chart.icon-pie-chart
-
play-circle.icon-play-circle
-
play.icon-play
-
plus-square.icon-plus-square
-
plus-circle.icon-plus-circle
-
plus.icon-plus
-
pocket.icon-pocket
-
printer.icon-printer
-
power.icon-power
-
radio.icon-radio
-
repeat.icon-repeat
-
refresh-ccw.icon-refresh-ccw
-
rewind.icon-rewind
-
rotate-ccw.icon-rotate-ccw
-
refresh-cw.icon-refresh-cw
-
rotate-cw.icon-rotate-cw
-
save.icon-save
-
search.icon-search
-
server.icon-server
-
scissors.icon-scissors
-
share-2.icon-share-
-
share.icon-share
-
shield.icon-shield
-
settings.icon-settings
-
skip-back.icon-skip-back
-
shuffle.icon-shuffle
-
sidebar.icon-sidebar
-
skip-forward.icon-skip-forward
-
slack.icon-slack
-
slash.icon-slash
-
smartphone.icon-smartphone
-
square.icon-square
-
speaker.icon-speaker
-
star.icon-star
-
stop-circle.icon-stop-circle
-
sun.icon-sun
-
sunrise.icon-sunrise
-
tablet.icon-tablet
-
tag.icon-tag
-
sunset.icon-sunset
-
target.icon-target
-
thermometer.icon-thermometer
-
thumbs-up.icon-thumbs-up
-
thumbs-down.icon-thumbs-down
-
toggle-left.icon-toggle-left
-
toggle-right.icon-toggle-right
-
trash-2.icon-trash-
-
trash.icon-trash
-
trending-up.icon-trending-up
-
trending-down.icon-trending-down
-
triangle.icon-triangle
-
type.icon-type
-
twitter.icon-twitter
-
upload.icon-upload
-
umbrella.icon-umbrella
-
upload-cloud.icon-upload-cloud
-
unlock.icon-unlock
-
user-check.icon-user-check
-
user-minus.icon-user-minus
-
user-plus.icon-user-plus
-
user-x.icon-user-x
-
user.icon-user
-
users.icon-users
-
video-off.icon-video-off
-
video.icon-video
-
voicemail.icon-voicemail
-
volume-x.icon-volume-x
-
volume-1.icon-volume-
-
volume-2.icon-volume-1
-
volume.icon-volume
-
watch.icon-watch
-
wifi.icon-wifi
-
x-square.icon-x-square
-
wind.icon-wind
-
x.icon-x
-
x-circle.icon-x-circle
-
zap.icon-zap
-
zoom-in.icon-zoom-in
-
zoom-out.icon-zoom-out
-
command.icon-command
-
cloud.icon-cloud
-
hash.icon-hash
-
headphones.icon-headphones
-
underline.icon-underline
-
italic.icon-italic
-
bold.icon-bold
-
crop.icon-crop
-
help-circle.icon-help-circle
-
paperclip.icon-paperclip
-
shopping-cart.icon-shopping-cart
-
tv.icon-tv
-
wifi-off.icon-wifi-off
-
gitlab.icon-gitlab
-
sliders.icon-sliders
-
star-on.icon-star-on
-
heart-on.icon-heart-on
-
archive.icon-archive
-
arrow-down-circle.icon-arrow-down-circle
-
arrow-up-circle.icon-arrow-up-circle
-
arrow-left-circle.icon-arrow-left-circle
-
arrow-right-circle.icon-arrow-right-circle
-
bar-chart-line-2.icon-bar-chart-line-
-
bar-chart-line.icon-bar-chart-line
-
book-open.icon-book-open
-
code.icon-code
-
database.icon-database
-
dollar-sign.icon-dollar-sign
-
folder-plus.icon-folder-plus
-
gift.icon-gift
-
folder-minus.icon-folder-minus
-
git-commit.icon-git-commit
-
git-branch.icon-git-branch
-
git-pull-request.icon-git-pull-request
-
git-merge.icon-git-merge
-
linkedin.icon-linkedin
-
hard-drive.icon-hard-drive
-
more-vertical-2.icon-more-vertical-
-
more-horizontal-2.icon-more-horizontal-
-
rss.icon-rss
-
send.icon-send
-
shield-off.icon-shield-off
-
shopping-bag.icon-shopping-bag
-
terminal.icon-terminal
-
truck.icon-truck
-
zap-off.icon-zap-off
-
youtube.icon-youtube