Good afteroon! Welcome to our website !

A font file, 249 icons

A font file contains all the icons. Font Awesome help you complete the meaning of the expression on the web page of each action.

Control with CSS styles

CSS can be used very easily change the color of the icon attribute, size, shadow, and any CSS can control.

Infinite zoom

Vector means that each icon can be a perfect present on all screen sizes.

Individuals, businesses are free to use

Font Awesome is completely free, whether personal or business use. See Agreement .

Support IE7 +

Font Awesome support for IE7 and above browsers. But if you have used on this outdated browser, I can only express sympathy!

On the Retina screen can also be perfect presents

Vector Icons Font Awesome are included in the high-resolution display can also be the perfect present.

Bootstrap designed specifically for

Font Awesome is a set of icons designed completely from scratch, complete and Bootstrap 2.2.2 version compatible.

Designer's assistant

Installation FontAwesome.otf font file, then this page is a direct copy and paste the icon character code can be used for your design it.

Compatible with screen readers

Font Awesome does not prevent the screen reader, this and other icons behave completely different fonts.

Perfect 14px font size

Each icon is re-created, and for the default font size 14px Bootstrap to do a maximum optimization.

Font Sub-setting

Thanks to @ grantgordon and @ johnsmclay , you can Subset to get just the icons you need.

Friendly copyright agreement

We follow the SIL Open Font agreement, the code follows the MIT license. Not too much restraint, gives you more freedom.

Version 3.0 added 40 new icons

We have a vibrant community, listening to popular demand. Font Awesome GitHub project .

New Style

New styles for Animated Spinning icons, icons with 2x-4x Size multipliers, icon borders, & More.

Slimming 28%

Despite a 16% increase icons, version 3.0 volume has become smaller. Font Awesome can also customize the icons you do not need to be removed.

Font Awesome 3.0 version adds 40 new icons. If you need more new icon, you can Font Awesome GitHub project proposed requirements, or you can create your icons contribution .

  • icon-cloud-download
  • icon-cloud-upload
  • icon-lightbulb
  • icon-exchange
  • icon-bell-alt
  • icon-file-alt
  • icon-beer
  • icon-coffee
  • icon-food
  • icon-fighter-jet
  • icon-user-md
  • icon-stethoscope
  • icon-suitcase
  • icon-building
  • icon-hospital
  • icon-ambulance
  • icon-medkit
  • icon-h-sign
  • icon-plus-sign-alt
  • icon-spinner
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-circle-blank
  • icon-circle
  • icon-desktop
  • icon-laptop
  • icon-tablet
  • icon-mobile-phone
  • icon-quote-left
  • icon-quote-right
  • icon-reply
  • icon-github-alt
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-adjust
  • 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-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exchange
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-food
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-laptop
  • icon-legal
  • icon-lemon
  • icon-lightbulb
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-mobile-phone
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • 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-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out
  • icon-file
  • icon-file-alt
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-paper-clip
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-circle
  • icon-circle-blank
  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small
  • icon-phone
  • icon-phone-sign
  • icon-facebook
  • icon-facebook-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-github
  • icon-github-alt
  • icon-github-sign
  • icon-linkedin
  • icon-linkedin-sign
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus
  • icon-google-plus-sign
  • icon-sign-blank
  • icon-ambulance
  • icon-beaker
  • icon-h-sign
  • icon-hospital
  • icon-medkit
  • icon-plus-sign-alt
  • icon-stethoscope
  • icon-user-md



Examples

Inline Icons

Font Awesome place with the icons just about Anywhere <i> tag.

icon-camera-retro
  1. <I Class = "icon-Camera-Retro" > </ i> icon-Camera-Retro
Icon classes are echoed via CSS: before.

Larger Icons

By giving icon set icon-large , icon-2x , icon-3x or icon-4x style, you can let the icon relative to its container becomes larger.

By applying icon-large (33% increase), icon-2x , icon-3x or icon-4x style icons become larger to allow.

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

  1. <p> <i Class = "icon-Camera-Retro icon-large" > </ i> icon-Camera-Retro </ P>
  2. <p> <i Class = "icon-Camera-Retro icon-2x" > </ i> icon-Camera-Retro </ P>
  3. <p> <i Class = "icon-Camera-Retro icon-3x" > </ i> icon-Camera-Retro </ P>
  4. <p> <i Class = "icon-Camera-Retro icon-4x" > </ i> icon-Camera-Retro </ P>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Animated Spinner

Use the icon-spin Class to get any icon to Rotate. Works best with icon-spinner and icon-Refresh .

Spinner icon when loading content ...
  1. <I Class = "icon-spinner icon-spin" > </ i> Spinner icon when loading content ...

CSS3 animations aren't supported in IE7 - IE9.

Bordered & Pulled Icons

Use icon-border and pull-right or pull-Left for easy pull quotes or Article graphics.

Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
  1. <I Class = "icon-quote-Left icon-4x pull-Left icon-muted" > </ i>
  2. Use a few of the new styles together ... lots of new possibilities.
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
  1. <I Class = "icon-flag icon-4x pull-Left icon-border" > </ i>
  2. Use a few of the new styles together ... lots of new possibilities.

Push button

Font Awesome icons can be well applied to the button assembly. The icon can be set up again, Bootstrap the pull-right , pull-Left and icon-spin style can be applied to the icon.

  1. <A Class = "btn" href = "#" >
  2. <I Class = "icon-REPEAT" > </ i> Reload </ a>
  3. <A Class = "btn btn-Success" href = "#" >
  4. <I Class = "icon-shopping-cart icon-large" > </ i> Checkout </ a>
  5. <A Class = "btn btn btn-large-Primary" href = "#" >
  6. <I Class = "icon-comment" > </ i> Comment </ a>
  7. <A Class = "btn btn btn-small-info" href = "#" >
  8. <I Class = "icon-info-sign" > </ i> Info </ a>
  9. <A Class = "btn btn-danger" href = "#" >
  10. <I Class = "icon-trash icon-large" > </ i> Delete </ a>
  11. <A Class = "btn btn-small" href = "#" >
  12. <I Class = "icon-COG" > </ i> Settings </ a>
  13. <A Class = "btn btn btn-large-danger" href = "#" >
  14. <I Class = "icon-flag icon-2x pull-Left" > </ i> Font Awesome <br> Version 3.0 </ a>
  15. <A Class = "btn btn-Primary" href = "#" >
  16. <I Class = "icon-Refresh icon-spin" > </ i> Synchronizing Content ... </ a>

Button Group

  1. <Div Class = "btn-group" >
  2. <A Class = "btn" href = "#" > <i Class = "icon-align-Left" > </ i> </ a>
  3. <A Class = "btn" href = "#" > <i Class = "icon-align-center" > </ i> </ a>
  4. <A Class = "btn" href = "#" > <i Class = "icon-align-right" > </ i> </ a>
  5. <A Class = "btn" href = "#" > <i Class = "icon-align-justify" > </ i> </ a>
  6. </ Div>

Drop-down menu button

  1. <Div Class = "btn-group Open" >
  2. <A Class = "btn btn-Primary" href = "#" > <i Class = "icon-user" > </ i> User </ a>
  3. <A Class = "btn btn-Primary dropdown-Toggle" Data-Toggle = "dropdown" href = "#" > <span Class = "icon-caret-down" > </ span> </ a>
  4. <Ul Class = "dropdown-menu" >
  5. <li> <a href = "#" > <i Class = "icon-Pencil" > </ i> Edit </ a> </ li>
  6. <li> <a href = "#" > <i Class = "icon-trash" > </ i> Delete </ a> </ li>
  7. <li> <a href = "#" > <i Class = "icon-Ban-Circle" > </ i> Ban </ a> </ li>
  8. <Li Class = "divider" > </ li>
  9. <li> <a href = "#" > <i Class = "i" > </ i> Make admin </ a> </ li>
  10. </ Ul>
  11. </ Div>
Don't forget to add the appropriate JavaScript to enable button dropdowns.

List

  • Lists
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs

Easily replace individual bullets.

  1. <Ul Class = "icons" >
  2. <li> <i Class = "icon-ok" > </ i> Lists </ li>
  3. <li> <i Class = "icon-ok" > </ i> Buttons </ li>
  4. <li> <i Class = "icon-ok" > </ i> Button groups </ li>
  5. <li> <i Class = "icon-ok" > </ i> Navigation </ li>
  6. <li> <i Class = "icon-ok" > </ i> Appended form inputs </ li>
  7. </ Ul>

Navigation

Use Font Awesome icons in navigation to provide helpful visual cues.

  1. <Ul Class = "nav nav-list" >
  2. <Li Class = "active" > <a href = "#" > <i Class = "icon-Home" > </ i> Home </ a> </ li>
  3. <li> <a href = "#" > <i Class = "icon-book" > </ i> Library </ a> </ li>
  4. <li> <a href = "#" > <i Class = "icon-Pencil" > </ i> Applications </ a> </ li>
  5. <li> <a href = "#" > <i Class = "icon-cogs" > </ i> Settings </ a> </ li>
  6. </ Ul>

    TAG:     Home        Pages        Portfolio        Features        Demos        Blog        Shop

Good afteroon! Welcome to our website !