Nutze Font Awesome Icons mit CSS

Wir helfen Ihnen!

Joomla Professionals
Experten für Joomla!

100% ÖKO
Neutral gehostete Webseiten.

Wie baut man Font Awesome in CSS ein?

Beispiel

Text

HTML

CSS

p.fontAwesome { position:relative; padding-left:20px; }

p.start:before { content: "\f015"; }

p.fontAwesome:before {
position: absolute;
top: 0px;
left: 0;
font-family: FontAwesome;
font-size: 1.2em;
color: #000; }

Liste diverser Font Awesome Symbole und ihrer CSS-Werte:

fa-glass \f000
fa-music \f001
fa-search \f002
fa-envelope-o \f003
fa-heart \f004
fa-star \f005
fa-star-o \f006
fa-user \f007
fa-film \f008
fa-th-large \f009
fa-th \f00a
fa-th-list \f00b
fa-check \f00c
fa-times \f00d
fa-search-plus \f00e
fa-search-minus \f010
fa-power-off \f011
fa-signal \f012
fa-cog \f013
fa-trash-o \f014
fa-home \f015
fa-file-o \f016
fa-clock-o \f017
fa-road \f018
fa-download \f019
fa-arrow-circle-o-down \f01a
fa-arrow-circle-o-up \f01b
fa-inbox \f01c
fa-play-circle-o \f01d
fa-repeat \f01e
fa-refresh \f021
fa-list-alt \f022
fa-lock \f023
fa-flag \f024
fa-headphones \f025
fa-volume-off \f026
fa-volume-down \f027
fa-volume-up \f028
fa-qrcode \f029
fa-barcode \f02a
fa-tag \f02b
fa-tags \f02c
fa-book \f02d
fa-bookmark \f02e
fa-print \f02f
fa-camera \f030
fa-font \f031
fa-bold \f032
fa-italic \f033
fa-text-height \f034
fa-text-width \f035
fa-align-left \f036
fa-align-center \f037
fa-align-right \f038
fa-align-justify \f039
fa-list \f03a
fa-outdent \f03b
fa-indent \f03c
fa-video-camera \f03d
fa-picture-o \f03e
fa-pencil \f040
fa-map-marker \f041
fa-adjust \f042
fa-tint \f043
fa-pencil-square-o \f044
fa-share-square-o \f045
fa-check-square-o \f046
fa-arrows \f047
fa-step-backward \f048
fa-fast-backward \f049
fa-backward \f04a
fa-play \f04b
fa-pause \f04c
fa-stop \f04d
fa-forward \f04e
fa-fast-forward \f050
fa-step-forward \f051
fa-eject \f052
fa-chevron-left \f053
fa-chevron-right \f054
fa-plus-circle \f055
fa-minus-circle \f056
fa-times-circle \f057
fa-check-circle \f058
fa-question-circle \f059
fa-info-circle \f05a
fa-crosshairs \f05b
fa-times-circle-o \f05c
fa-check-circle-o \f05d
fa-ban \f05e
fa-arrow-left \f060
fa-arrow-right \f061
fa-arrow-up \f062
fa-arrow-down \f063
fa-share \f064
fa-expand \f065
fa-compress \f066
fa-plus \f067
fa-minus \f068
fa-asterisk \f069
fa-exclamation-circle \f06a
fa-gift \f06b
fa-leaf \f06c
fa-fire \f06d
fa-eye \f06e
fa-eye-slash \f070
fa-exclamation-triangle \f071
fa-plane \f072
fa-calendar \f073
fa-random \f074
fa-comment \f075
fa-magnet \f076
fa-chevron-up \f077
fa-chevron-down \f078
fa-retweet \f079
fa-shopping-cart \f07a
fa-folder \f07b
fa-folder-open \f07c
fa-arrows-v \f07d
fa-arrows-h \f07e
fa-bar-chart \f080
fa-twitter-square \f081
fa-facebook-square \f082
fa-camera-retro \f083
fa-key \f084
fa-cogs \f085
fa-comments \f086
fa-thumbs-o-up \f087
fa-thumbs-o-down \f088
fa-star-half \f089
fa-heart-o \f08a
fa-sign-out \f08b
fa-linkedin-square \f08c
fa-thumb-tack \f08d
fa-external-link \f08e
fa-sign-in \f090
fa-trophy \f091
fa-github-square \f092
fa-upload \f093
fa-lemon-o \f094
fa-phone \f095
fa-square-o \f096
fa-bookmark-o \f097
fa-phone-square \f098
fa-twitter \f099
fa-facebook \f09a
fa-github \f09b
fa-unlock \f09c
fa-credit-card \f09d
fa-rss \f09e
fa-hdd-o \f0a0
fa-bullhorn \f0a1
fa-bell \f0f3
fa-certificate \f0a3
fa-hand-o-right \f0a4
fa-hand-o-left \f0a5
fa-hand-o-up \f0a6
fa-hand-o-down \f0a7
fa-arrow-circle-left \f0a8
fa-arrow-circle-right \f0a9
fa-arrow-circle-up \f0aa
fa-arrow-circle-down \f0ab
fa-globe \f0ac
fa-wrench \f0ad
fa-tasks \f0ae
fa-filter \f0b0
fa-briefcase \f0b1
fa-arrows-alt \f0b2
fa-users \f0c0
fa-link \f0c1
fa-cloud \f0c2
fa-flask \f0c3
fa-scissors \f0c4
fa-files-o \f0c5
fa-paperclip \f0c6
fa-floppy-o \f0c7
fa-square \f0c8
fa-bars \f0c9
fa-list-ul \f0ca
fa-list-ol \f0cb
fa-strikethrough \f0cc
fa-underline \f0cd
fa-table \f0ce
fa-magic \f0d0
fa-truck \f0d1
fa-pinterest \f0d2
fa-pinterest-square \f0d3
fa-google-plus-square \f0d4
fa-google-plus \f0d5
fa-money \f0d6
fa-caret-down \f0d7
fa-caret-up \f0d8
fa-caret-left \f0d9
fa-caret-right \f0da
fa-columns \f0db
fa-sort \f0dc
fa-sort-desc \f0dd
fa-sort-asc \f0de
fa-envelope \f0e0
fa-linkedin \f0e1
fa-undo \f0e2
fa-gavel \f0e3
fa-tachometer \f0e4
fa-comment-o \f0e5
fa-comments-o \f0e6
fa-bolt \f0e7
fa-sitemap \f0e8
fa-umbrella \f0e9
fa-clipboard \f0ea
fa-lightbulb-o \f0eb
fa-exchange \f0ec
fa-cloud-download \f0ed
fa-cloud-upload \f0ee
fa-user-md \f0f0
fa-stethoscope \f0f1
fa-suitcase \f0f2
fa-bell-o \f0a2
fa-coffee \f0f4
fa-cutlery \f0f5
fa-file-text-o \f0f6
fa-building-o \f0f7
fa-hospital-o \f0f8
fa-ambulance \f0f9
fa-medkit \f0fa
fa-fighter-jet \f0fb
fa-beer \f0fc
fa-h-square \f0fd
fa-plus-square \f0fe
fa-angle-double-left \f100
fa-angle-double-right \f101
fa-angle-double-up \f102
fa-angle-double-down \f103
fa-angle-left \f104
fa-angle-right \f105
fa-angle-up \f106
fa-angle-down \f107
fa-desktop \f108
fa-laptop \f109
fa-tablet \f10a
fa-mobile \f10b
fa-circle-o \f10c
fa-quote-left \f10d
fa-quote-right \f10e
fa-spinner \f110
fa-circle \f111
fa-reply \f112
fa-github-alt \f113
fa-folder-o \f114
fa-folder-open-o \f115
fa-smile-o \f118
fa-frown-o \f119
fa-meh-o \f11a
fa-gamepad \f11b
fa-keyboard-o \f11c
fa-flag-o \f11d
fa-flag-checkered \f11e
fa-terminal \f120
fa-code \f121
fa-reply-all \f122
fa-star-half-o \f123
fa-location-arrow \f124
fa-crop \f125
fa-code-fork \f126
fa-chain-broken \f127
fa-question \f128
fa-info \f129
fa-exclamation \f12a
fa-superscript \f12b
fa-subscript \f12c
fa-eraser \f12d
fa-puzzle-piece \f12e
fa-microphone \f130
fa-microphone-slash \f131
fa-shield \f132
fa-calendar-o \f133
fa-fire-extinguisher \f134
fa-rocket \f135
fa-maxcdn \f136
fa-chevron-circle-left \f137
fa-chevron-circle-right \f138
fa-chevron-circle-up \f139
fa-chevron-circle-down \f13a
fa-html5 \f13b
fa-css3 \f13c
fa-anchor \f13d
fa-unlock-alt \f13e
fa-bullseye \f140
fa-ellipsis-h \f141
fa-ellipsis-v \f142
fa-rss-square \f143
fa-play-circle \f144
fa-ticket \f145
fa-minus-square \f146
fa-minus-square-o \f147
fa-level-up \f148
fa-level-down \f149
fa-check-square \f14a
fa-pencil-square \f14b
fa-external-link-square \f14c
fa-share-square \f14d
fa-compass \f14e
fa-caret-square-o-down \f150
fa-caret-square-o-up \f151
fa-caret-square-o-right \f152
fa-eur \f153
fa-gbp \f154
fa-usd \f155
fa-inr \f156
fa-jpy \f157
fa-rub \f158
fa-krw \f159
fa-btc \f15a
fa-file \f15b
fa-file-text \f15c
fa-sort-alpha-asc \f15d
fa-sort-alpha-desc \f15e
fa-sort-amount-asc \f160
fa-sort-amount-desc \f161
fa-sort-numeric-asc \f162
fa-sort-numeric-desc \f163
fa-thumbs-up \f164
fa-thumbs-down \f165
fa-youtube-square \f166
fa-youtube \f167
fa-xing \f168
fa-xing-square \f169
fa-youtube-play \f16a
fa-dropbox \f16b
fa-stack-overflow \f16c
fa-instagram \f16d
fa-flickr \f16e
fa-adn \f170
fa-bitbucket \f171
fa-bitbucket-square \f172
fa-tumblr \f173
fa-tumblr-square \f174
fa-long-arrow-down \f175
fa-long-arrow-up \f176
fa-long-arrow-left \f177
fa-long-arrow-right \f178
fa-apple \f179
fa-windows \f17a
fa-android \f17b
fa-linux \f17c
fa-dribbble \f17d
fa-skype \f17e
fa-foursquare \f180
fa-trello \f181
fa-female \f182
fa-male \f183
fa-gittip \f184
fa-sun-o \f185
fa-moon-o \f186
fa-archive \f187
fa-bug \f188
fa-vk \f189
fa-weibo \f18a
fa-renren \f18b
fa-pagelines \f18c
fa-stack-exchange \f18d
fa-arrow-circle-o-right \f18e
fa-arrow-circle-o-left \f190
fa-caret-square-o-left \f191
fa-dot-circle-o \f192
fa-wheelchair \f193
fa-vimeo-square \f194
fa-try \f195
fa-plus-square-o \f196

Nutze Font Awesome Icons mit CSS - Liste der Zeichen

Wie baut man Font Awesome in CSS ein?

Beispiel

HTML

CSS

Liste diverser Font Awesome Symbole und ihrer CSS-Werte: