Icon Fonts, sagen Sie?

Ein weit verbreitetes Gestaltungsmittel auf sehr vielen Webseiten sind Icons – sei es in der Navigation, in Buttons, anstatt von Text-Links, oder natürlich vor allem natürlich als schnell wieder zu erkennende Verknüpfungen und Links zu den bekannten Sozialen Netzwerken wie zum Beispiel Twitter, Facebook oder Google+. Dafür werden üblicherweise kleine Grafiken eingebunden, die dann vom Browser des Besuchers entweder einzeln oder als etwas performantere Variante zusammen in CSS Sprites geladen werden.

Eine sehr viel schönere, schnellere, und in vielen Projekten passende Möglichkeit der Darstellung von Icons ist die Nutzung von so genannten Icon Fonts anstelle von starren Grafiken. Dies sind Fonts, die entweder größtenteils oder komplett aus Symbolen bestehen. Diese Icon Fonts werden in mittels CSS eingebunden und können dann wie jeder andere Font auch in den Webseiten genutzt und per CSS gestyled werden.

New Icons in 3.2.0

[one_fourth]

  • icon-compass
  • icon-collapse
  • icon-collapse-top
  • icon-expand
  • icon-eur
  • icon-euro (alias)
  • icon-gbp
  • icon-usd
  • icon-dollar (alias)
  • icon-inr
  • icon-rupee (alias)
  • icon-jpy
  • icon-yen (alias)
  • icon-cny
  • icon-renminbi (alias)
  • icon-krw
  • icon-won (alias)

[/one_fourth] [one_fourth]

  • icon-btc
  • icon-bitcoin (alias)
  • icon-file
  • icon-file-text
  • icon-sort-by-alphabet
  • icon-sort-by-alphabet-alt
  • icon-sort-by-attributes
  • icon-sort-by-attributes-alt
  • icon-sort-by-order
  • icon-sort-by-order-alt
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-youtube-sign
  • icon-youtube
  • icon-xing
  • icon-xing-sign

[/one_fourth] [one_fourth]

  • icon-youtube-play
  • icon-dropbox
  • icon-stackexchange
  • icon-instagram
  • icon-flickr
  • icon-adn
  • icon-bitbucket
  • icon-bitbucket-sign
  • icon-tumblr
  • icon-tumblr-sign
  • icon-long-arrow-down
  • icon-long-arrow-up
  • icon-long-arrow-left
  • icon-long-arrow-right
  • icon-apple
  • icon-windows

[/one_fourth] [one_fourth_last]

  • icon-android
  • icon-linux
  • icon-dribble
  • icon-skype
  • icon-foursquare
  • icon-trello
  • icon-female
  • icon-male
  • icon-gittip
  • icon-sun
  • icon-moon
  • icon-archive
  • icon-bug
  • icon-vk
  • icon-weibo
  • icon-renren

[/one_fourth_last]

[bra_border_divider]

Web Application Icons

[one_fourth]

  • icon-adjust
  • icon-anchor
  • icon-archive
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-beer
  • icon-bell
  • icon-bell-alt
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bug
  • icon-building
  • icon-bullhorn
  • icon-bullseye
  • icon-calendar
  • icon-calendar-empty
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-check-minus
  • icon-check-sign
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-code
  • icon-code-fork
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-collapse
  • icon-collapse-alt
  • icon-collapse-top
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-compass
  • icon-credit-card
  • icon-crop
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-edit-sign
  • icon-ellipsis-horizontal
  • icon-ellipsis-vertical

[/one_fourth] [one_fourth]

  • icon-envelope
  • icon-envelope-alt
  • icon-eraser
  • icon-exchange
  • icon-exclamation
  • icon-exclamation-sign
  • icon-expand
  • icon-expand-alt
  • icon-external-link
  • icon-external-link-sign
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-female
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-fire-extinguisher
  • icon-flag
  • icon-flag-alt
  • icon-flag-checkered
  • icon-folder-close
  • icon-folder-close-alt
  • icon-folder-open
  • icon-folder-open-alt
  • icon-food
  • icon-frown
  • icon-gamepad
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info
  • icon-info-sign
  • icon-key
  • icon-keyboard
  • icon-laptop
  • icon-leaf
  • icon-legal
  • icon-lemon
  • icon-level-down
  • icon-level-up
  • icon-lightbulb
  • icon-location-arrow
  • icon-lock
  • icon-magic
  • icon-magnet
  • icon-mail-forward (alias)
  • icon-mail-reply (alias)

[/one_fourth] [one_fourth]

  • icon-mail-reply-all
  • icon-male
  • icon-map-marker
  • icon-meh
  • icon-microphone
  • icon-microphone-off
  • icon-minus
  • icon-minus-sign
  • icon-minus-sign-alt
  • icon-mobile-phone
  • icon-money
  • icon-moon
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-phone
  • icon-phone-sign
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-plus-sign-alt
  • icon-power-off (alias)
  • icon-print
  • icon-pushpin
  • icon-puzzle-piece
  • icon-qrcode
  • icon-question
  • icon-question-sign
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-reply
  • icon-reply-all
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rocket
  • icon-rss
  • icon-rss-sign
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-share-sign
  • icon-shield
  • icon-shopping-cart

[/one_fourth] [one_fourth_last]

  • icon-sign-blank
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-smile
  • icon-sort
  • icon-sort-by-alphabet
  • icon-sort-by-alphabet-alt
  • icon-sort-by-attributes
  • icon-sort-by-attributes-alt
  • icon-sort-by-order
  • icon-sort-by-order-alt
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-star-half-empty
  • icon-star-half-full (alias)
  • icon-subscript
  • icon-suitcase
  • icon-sun
  • icon-superscript
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-terminal
  • icon-thumbs-down
  • icon-thumbs-down-alt
  • icon-thumbs-up
  • icon-thumbs-up-alt
  • icon-ticket
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-unchecked (alias)
  • icon-unlock
  • icon-unlock-alt
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-volume-down
  • icon-volume-off
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out

[/one_fourth_last]
[bra_border_divider]

Currency Icons

[one_fourth]

  • icon-bitcoin (alias)
  • icon-btc
  • icon-cny
  • icon-dollar (alias)

[/one_fourth] [one_fourth]

  • icon-eur
  • icon-euro (alias)
  • icon-gbp
  • icon-inr

[/one_fourth] [one_fourth]

  • icon-jpy
  • icon-krw
  • icon-renminbi (alias)
  • icon-rupee (alias)

[/one_fourth] [one_fourth_last]

  • icon-usd
  • icon-won (alias)
  • icon-yen (alias)

[/one_fourth_last]

[bra_border_divider]

Text Editor Icons

[one_fourth]

  • icon-align-center
  • icon-align-justify
  • icon-align-left
  • icon-align-right
  • icon-bold
  • icon-columns
  • icon-copy
  • icon-cut
  • icon-eraser
  • icon-file

[/one_fourth] [one_fourth]

  • icon-file-alt
  • icon-file-text
  • icon-file-text-alt
  • icon-font
  • icon-indent-left
  • icon-indent-right
  • icon-italic
  • icon-link
  • icon-list
  • icon-list-alt

[/one_fourth] [one_fourth]

  • icon-list-ol
  • icon-list-ul
  • icon-paper-clip
  • icon-paperclip (alias)
  • icon-paste
  • icon-repeat
  • icon-rotate-left (alias)
  • icon-rotate-right (alias)
  • icon-save
  • icon-strikethrough

[/one_fourth] [one_fourth_last]

  • icon-table
  • icon-text-height
  • icon-text-width
  • icon-th
  • icon-th-large
  • icon-th-list
  • icon-underline
  • icon-undo
  • icon-unlink

[/one_fourth_last]

[bra_border_divider]

Directional Icons

[one_fourth]

  • icon-angle-down
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down

[/one_fourth] [one_fourth]

  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-sign-down
  • icon-chevron-sign-left
  • icon-chevron-sign-right

[/one_fourth] [one_fourth]

  • icon-chevron-sign-up
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-down
  • icon-double-angle-left
  • icon-double-angle-right

[/one_fourth] [one_fourth_last]

  • icon-double-angle-up
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-long-arrow-down
  • icon-long-arrow-left
  • icon-long-arrow-right
  • icon-long-arrow-up

[/one_fourth_last]

[bra_border_divider]

Video Player Icons

[one_fourth]

  • icon-backward
  • icon-eject
  • icon-fast-backward
  • icon-fast-forward

[/one_fourth] [one_fourth]

  • icon-forward
  • icon-fullscreen
  • icon-pause
  • icon-play

[/one_fourth] [one_fourth]

  • icon-play-circle
  • icon-play-sign
  • icon-resize-full
  • icon-resize-small

[/one_fourth] [one_fourth_last]

  • icon-step-backward
  • icon-step-forward
  • icon-stop
  • icon-youtube-play

[/one_fourth_last]
[bra_border_divider]

Brand Icons

  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.

[one_fourth]

  • icon-adn
  • icon-android
  • icon-apple
  • icon-bitbucket
  • icon-bitbucket-sign
  • icon-bitcoin (alias)
  • icon-btc
  • icon-css3
  • icon-dribble
  • icon-dropbox
  • icon-facebook

[/one_fourth] [one_fourth]

  • icon-facebook-sign
  • icon-flickr
  • icon-foursquare
  • icon-github
  • icon-github-alt
  • icon-github-sign
  • icon-gittip
  • icon-google-plus
  • icon-google-plus-sign
  • icon-html5
  • icon-instagram

[/one_fourth] [one_fourth]

  • icon-linkedin
  • icon-linkedin-sign
  • icon-linux
  • icon-maxcdn
  • icon-pinterest
  • icon-pinterest-sign
  • icon-renren
  • icon-skype
  • icon-stackexchange
  • icon-trello
  • icon-tumblr

[/one_fourth] [one_fourth_last]

  • icon-tumblr-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-vk
  • icon-weibo
  • icon-windows
  • icon-xing
  • icon-xing-sign
  • icon-youtube
  • icon-youtube-play
  • icon-youtube-sign

[/one_fourth_last]
[bra_border_divider]

Medical Icons

[one_fourth]

  • icon-ambulance
  • icon-h-sign

[/one_fourth] [one_fourth]

  • icon-hospital
  • icon-medkit

[/one_fourth] [one_fourth]

  • icon-plus-sign-alt
  • icon-stethoscope

[/one_fourth] [one_fourth_last]

  • icon-user-md

[/one_fourth_last]

[bra_border_divider]