Font Awesome
Font Awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
One Font, 519 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.
No JavaScript Required
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
Infinite Scalability
Scalable vector graphics means every icon looks awesome at any size.
Free, as in Speech
Font Awesome is completely free for commercial use.
CSS Control
Easily style icon color, size, shadow, and anything that's possible with CSS.
Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
Plays Well with Others
Originally designed for Bootstrap, Font Awesome works great with all frameworks.
Desktop Friendly
To use on the desktop or for a complete set of vectors, check out the cheatsheet below.
Screen Reader Compatible
Font Awesome won't trip up screen readers, unlike other icon fonts.
Every Font Awesome 4.3.0 Icon, CSS Class, & Unicode.
Home
Home
Home
Home
Home
<p><i class="fa fa-home"></i> Home</p> <h4><i class="fa fa-home"></i> Home</h4> <h3><i class="fa fa-home"></i> Home</h3> <h2><i class="fa fa-home"></i> Home</h2> <h2 class="text-danger"><i class="fa fa-home"></i> Home</h2>
fa-adjust[]
fa-adn[]
fa-align-center[]
fa-align-justify[]
fa-align-left[]
fa-align-right[]
fa-ambulance []
fa-anchor []
fa-android []
fa-angellist []
fa-angle-double-down []
fa-angle-double-left []
fa-angle-double-right []
fa-angle-double-up []
fa-angle-down []
fa-angle-left[]
fa-angle-right []
fa-angle-up []
fa-apple []
fa-archive []
fa-area-chart []
fa-arrow-circle-down []
fa-arrow-circle-left []
fa-arrow-circle-o-down []
fa-arrow-circle-o-left []
fa-arrow-circle-o-right []
fa-arrow-circle-o-up []
fa-arrow-circle-right []
fa-arrow-circle-up []
fa-arrow-down []
fa-arrow-left []
fa-arrow-right []
fa-arrow-up []
fa-arrows []
fa-arrows-alt []
fa-arrows-h []
fa-arrows-v []
fa-asterisk []
fa-at []
fa-automobile []
fa-backward []
fa-ban []
fa-bank []
fa-bar-chart []
fa-bar-chart-o []
fa-barcode []
fa-bars []
fa-bed []
fa-beer []
fa-behance []
fa-behance-square []
fa-bell []
fa-bell-o []
fa-bell-slash []
fa-bell-slash-o []
fa-bicycle []
fa-binoculars []
fa-birthday-cake []
fa-bitbucket []
fa-bitbucket-square []
fa-bitcoin []
fa-bold []
fa-bolt []
fa-bomb []
fa-book []
fa-bookmark []
fa-bookmark-o []
fa-briefcase []
fa-btc []
fa-bug []
fa-building []
fa-building-o []
fa-bullhorn []
fa-bullseye []
fa-bus []
fa-buysellads []
fa-cab []
fa-calculator []
fa-calendar []
fa-calendar-o []
fa-camera []
fa-camera-retro []
fa-car []
fa-caret-down []
fa-caret-left []
fa-caret-right []
fa-caret-square-o-down []
fa-caret-square-o-left []
fa-caret-square-o-right []
fa-caret-square-o-up []
fa-caret-up []
fa-cart-arrow-down []
fa-cart-plus []
fa-cc []
fa-cc-amex []
fa-cc-discover []
fa-cc-mastercard []
fa-cc-paypal []
fa-cc-stripe []
fa-cc-visa []
fa-certificate []
fa-chain []
fa-chain-broken []
fa-check []
fa-check-circle []
fa-check-circle-o []
fa-check-square []
fa-check-square-o []
fa-chevron-circle-down []
fa-chevron-circle-left []
fa-chevron-circle-right []
fa-chevron-circle-up []
fa-chevron-down []
fa-chevron-left []
fa-chevron-right []
fa-chevron-up []
fa-child []
fa-circle []
fa-circle-o []
fa-circle-o-notch []
fa-circle-thin []
fa-clipboard []
fa-clock-o []
fa-close []
fa-cloud []
fa-cloud-download []
fa-cloud-upload []
fa-cny []
fa-code []
fa-code-fork []
fa-codepen []
fa-coffee []
fa-cog []
fa-cogs []
fa-columns []
fa-comment []
fa-comment-o []
fa-comments []
fa-comments-o []
fa-compass []
fa-compress []
fa-connectdevelop []
fa-copy []
fa-copyright []
fa-credit-card []
fa-crop []
fa-crosshairs []
fa-css3 []
fa-cube []
fa-cubes []
fa-cut []
fa-cutlery []
fa-dashboard []
fa-dashcube []
fa-database []
fa-dedent []
fa-delicious []
fa-desktop []
fa-deviantart []
fa-diamond []
fa-digg []
fa-dollar []
fa-dot-circle-o []
fa-download []
fa-dribbble []
fa-dropbox []
fa-drupal []
fa-edit []
fa-eject []
fa-ellipsis-h []
fa-ellipsis-v []
fa-empire []
fa-envelope []
fa-envelope-o []
fa-envelope-square []
fa-eraser []
fa-eur []
fa-euro []
fa-exchange []
fa-exclamation []
fa-exclamation-circle []
fa-exclamation-triangle []
fa-expand []
fa-external-link []
fa-external-link-square []
fa-eye []
fa-eye-slash []
fa-eyedropper []
fa-facebook []
fa-facebook-f []
fa-facebook-official []
fa-facebook-square []
fa-fast-backward []
fa-fast-forward []
fa-fax []
fa-female []
fa-fighter-jet []
fa-file []
fa-file-archive-o []
fa-file-audio-o []
fa-file-code-o []
fa-file-excel-o []
fa-file-image-o []
fa-file-movie-o []
fa-file-o []
fa-file-pdf-o []
fa-file-photo-o []
fa-file-picture-o []
fa-file-powerpoint-o []
fa-file-sound-o []
fa-file-text []
fa-file-text-o []
fa-file-video-o []
fa-file-word-o []
fa-file-zip-o []
fa-files-o []
fa-film []
fa-filter []
fa-fire []
fa-fire-extinguisher []
fa-flag []
fa-flag-checkered []
fa-flag-o []
fa-flash []
fa-flask []
fa-flickr []
fa-floppy-o []
fa-folder []
fa-folder-o []
fa-folder-open []
fa-folder-open-o []
fa-font []
fa-forumbee []
fa-forward []
fa-foursquare []
fa-frown-o []
fa-futbol-o []
fa-gamepad []
fa-gavel []
fa-gbp []
fa-ge []
fa-gear []
fa-gears []
fa-genderless []
fa-gift []
fa-git []
fa-git-square []
fa-github []
fa-github-alt []
fa-github-square []
fa-gittip []
fa-glass []
fa-globe []
fa-google []
fa-google-plus []
fa-google-plus-square []
fa-google-wallet []
fa-graduation-cap []
fa-gratipay []
fa-group []
fa-h-square []
fa-hacker-news []
fa-hand-o-down []
fa-hand-o-left []
fa-hand-o-right []
fa-hand-o-up []
fa-hdd-o []
fa-header []
fa-headphones []
fa-heart []
fa-heart-o []
fa-heartbeat []
fa-history []
fa-home []
fa-hospital-o []
fa-hotel []
fa-html5 []
fa-ils []
fa-image []
fa-inbox []
fa-indent []
fa-info []
fa-info-circle []
fa-inr []
fa-instagram []
fa-institution []
fa-ioxhost []
fa-italic []
fa-joomla []
fa-jpy []
fa-jsfiddle []
fa-key []
fa-keyboard-o []
fa-krw []
fa-language []
fa-laptop []
fa-lastfm []
fa-lastfm-square []
fa-leaf []
fa-leanpub []
fa-legal []
fa-lemon-o []
fa-level-down []
fa-level-up []
fa-life-bouy []
fa-life-buoy []
fa-life-ring []
fa-life-saver []
fa-lightbulb-o []
fa-line-chart []
fa-link []
fa-linkedin []
fa-linkedin-square []
fa-linux []
fa-list []
fa-list-alt []
fa-list-ol []
fa-list-ul []
fa-location-arrow []
fa-lock []
fa-long-arrow-down []
fa-long-arrow-left []
fa-long-arrow-right []
fa-long-arrow-up []
fa-magic []
fa-magnet []
fa-mail-forward []
fa-mail-reply []
fa-mail-reply-all []
fa-male []
fa-map-marker []
fa-mars []
fa-mars-double []
fa-mars-stroke []
fa-mars-stroke-h []
fa-mars-stroke-v []
fa-maxcdn []
fa-meanpath []
fa-medium []
fa-medkit []
fa-meh-o []
fa-mercury []
fa-microphone []
fa-microphone-slash []
fa-minus []
fa-minus-circle []
fa-minus-square []
fa-minus-square-o []
fa-mobile []
fa-mobile-phone []
fa-money []
fa-moon-o []
fa-mortar-board []
fa-motorcycle []
fa-music []
fa-navicon []
fa-neuter []
fa-newspaper-o []
fa-openid []
fa-outdent []
fa-pagelines []
fa-paint-brush []
fa-paper-plane []
fa-paper-plane-o []
fa-paperclip []
fa-paragraph []
fa-paste []
fa-pause []
fa-paw []
fa-paypal []
fa-pencil []
fa-pencil-square []
fa-pencil-square-o []
fa-phone []
fa-phone-square []
fa-photo []
fa-picture-o []
fa-pie-chart []
fa-pied-piper []
fa-pied-piper-alt []
fa-pinterest []
fa-pinterest-p []
fa-pinterest-square []
fa-plane []
fa-play []
fa-play-circle []
fa-play-circle-o []
fa-plug []
fa-plus []
fa-plus-circle []
fa-plus-square []
fa-plus-square-o []
fa-power-off []
fa-print []
fa-puzzle-piece []
fa-qq []
fa-qrcode []
fa-question []
fa-question-circle []
fa-quote-left []
fa-quote-right []
fa-ra []
fa-random []
fa-rebel []
fa-recycle []
fa-reddit []
fa-reddit-square []
fa-refresh []
fa-remove []
fa-renren []
fa-reorder []
fa-repeat []
fa-reply []
fa-reply-all []
fa-retweet []
fa-rmb []
fa-road []
fa-rocket []
fa-rotate-left []
fa-rotate-right []
fa-rouble []
fa-rss []
fa-rss-square []
fa-rub []
fa-ruble []
fa-rupee []
fa-save []
fa-scissors []
fa-search []
fa-search-minus []
fa-search-plus []
fa-sellsy []
fa-send []
fa-send-o []
fa-server []
fa-share []
fa-share-alt []
fa-share-alt-square []
fa-share-square []
fa-share-square-o []
fa-shekel []
fa-sheqel []
fa-shield []
fa-ship []
fa-shirtsinbulk []
fa-shopping-cart []
fa-sign-in []
fa-sign-out []
fa-signal []
fa-simplybuilt []
fa-sitemap []
fa-skyatlas []
fa-skype []
fa-slack []
fa-sliders []
fa-slideshare []
fa-smile-o []
fa-soccer-ball-o []
fa-sort []
fa-sort-alpha-asc []
fa-sort-alpha-desc []
fa-sort-amount-asc []
fa-sort-amount-desc []
fa-sort-asc []
fa-sort-desc []
fa-sort-down []
fa-sort-numeric-asc []
fa-sort-numeric-desc []
fa-sort-up []
fa-soundcloud []
fa-space-shuttle []
fa-spinner []
fa-spoon []
fa-spotify []
fa-square []
fa-square-o []
fa-stack-exchange []
fa-stack-overflow []
fa-star []
fa-star-half []
fa-star-half-empty []
fa-star-half-full []
fa-star-half-o []
fa-star-o []
fa-steam []
fa-steam-square []
fa-step-backward []
fa-step-forward []
fa-stethoscope []
fa-stop []
fa-street-view []
fa-strikethrough []
fa-stumbleupon []
fa-stumbleupon-circle []
fa-subscript []
fa-subway []
fa-suitcase []
fa-sun-o []
fa-superscript []
fa-support []
fa-table []
fa-tablet []
fa-tachometer []
fa-tag []
fa-tags []
fa-tasks []
fa-taxi []
fa-tencent-weibo []
fa-terminal []
fa-text-height []
fa-text-width []
fa-th []
fa-th-large []
fa-th-list []
fa-thumb-tack []
fa-thumbs-down []
fa-thumbs-o-down []
fa-thumbs-o-up []
fa-thumbs-up []
fa-ticket []
fa-times []
fa-times-circle []
fa-times-circle-o []
fa-tint []
fa-toggle-down []
fa-toggle-left []
fa-toggle-off []
fa-toggle-on []
fa-toggle-right []
fa-toggle-up []
fa-train []
fa-transgender []
fa-transgender-alt []
fa-trash []
fa-trash-o []
fa-tree []
fa-trello []
fa-trophy []
fa-truck []
fa-try []
fa-tty []
fa-tumblr []
fa-tumblr-square []
fa-turkish-lira []
fa-twitch []
fa-twitter []
fa-twitter-square []
fa-umbrella []
fa-underline []
fa-undo []
fa-university []
fa-unlink []
fa-unlock []
fa-unlock-alt []
fa-unsorted []
fa-upload []
fa-usd []
fa-user []
fa-user-md []
fa-user-plus []
fa-user-secret []
fa-user-times []
fa-users []
fa-venus []
fa-venus-double []
fa-venus-mars []
fa-viacoin []
fa-video-camera []
fa-vimeo-square []
fa-vine []
fa-vk []
fa-volume-down []
fa-volume-off []
fa-volume-up []
fa-warning []
fa-wechat []
fa-weibo []
fa-weixin []
fa-whatsapp []
fa-wheelchair []
fa-wifi []
fa-windows []
fa-won []
fa-wordpress []
fa-wrench []
fa-xing []
fa-xing-square []
fa-yahoo []
fa-yelp []
fa-yen []
fa-youtube []
fa-youtube-play []
fa-youtube-square []
Other Examples
After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag. Some examples appreciatively re-usable using Bootstrap.
Larger Icons
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x,
fa-3x, fa-4x, or fa-5x classes.
<p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
- If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Fixed Width Icons
- Home
- Library
- Applications
- Settings
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists & list groups.
<ul class="list-group">
<li class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</li>
<li class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</li>
<li class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</li>
<li class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</li>
</ul>
List Icons
- List icons
- can be used
- as bullets
- in lists
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Bordered & Pulled Icons
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Use fa-border and pull-right or pull-left for easy pull quotes or
article icons.
<p>
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.
</p>
Animated Icons
Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate
with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.
<p>
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
</p>
Rotated & Flipped
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
<p style="font-size: 18px;">
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
</p>