Font Awesome

Font Awesome

一套绝佳的图标字体库和CSS框架

   立即下载    找图标
Version 4.7.0   ·   GitHub项目   ·   Old 3.2.1 Docs   ·   作者 Dave Gandy
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
npm install font-awesome --save
最近更新: 2024.03.30
访问人次： 6,323,631
下载次数： 2,845,633

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

一个字库，675个图标

仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。

无需依赖JavaScript

Font Awesome完全不依赖JavaScript，因此无需担心兼容性。

无限缩放

无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。

如言语一般自由

Font Awesome完全免费，哪怕是商业用途。请查看许可。

CSS控制

只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。

高分屏完美呈现

Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。

完美兼容其它框架

尽管是为Bootstrap设计，但Font Awesome同样能与其它框架完美协同运作。

可用于桌面系统

用于桌面系统，或需要一套完整的矢量图，请查看备忘。

可适配于屏幕阅读器

与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作。

4.7.0版新增41个全新的图标

Example of address-book
Example of address-book-o
Example of address-card
Example of address-card-o
Example of bandcamp
Example of bath
Example of bathtub (alias)
Example of drivers-license (alias)
Example of drivers-license-o (alias)
Example of eercast
Example of envelope-open
Example of envelope-open-o
Example of etsy
Example of free-code-camp
Example of grav
Example of handshake-o
Example of id-badge
Example of id-card
Example of id-card-o
Example of imdb
Example of linode
Example of meetup
Example of microchip
Example of podcast
Example of quora
Example of ravelry
Example of s15 (alias)
Example of shower
Example of snowflake-o
Example of superpowers
Example of telegram
Example of thermometer (alias)
Example of thermometer-0 (alias)
Example of thermometer-1 (alias)
Example of thermometer-2 (alias)
Example of thermometer-3 (alias)
Example of thermometer-4 (alias)
Example of thermometer-empty
Example of thermometer-full
Example of thermometer-half
Example of thermometer-quarter
Example of thermometer-three-quarters
Example of times-rectangle (alias)
Example of times-rectangle-o (alias)
Example of user-circle
Example of user-circle-o
Example of user-o
Example of vcard (alias)
Example of vcard-o (alias)
Example of window-close
Example of window-close-o
Example of window-maximize
Example of window-minimize
Example of window-restore
Example of wpexplorer

网页

Example of address-book
Example of address-book-o
Example of address-card
Example of address-card-o
Example of adjust
Example of american-sign-language-interpreting
Example of anchor
Example of archive
Example of area-chart
Example of arrows
Example of arrows-h
Example of arrows-v
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of asterisk
Example of at
Example of audio-description
Example of automobile (alias)
Example of balance-scale
Example of ban
Example of bank (alias)
Example of bar-chart
Example of bar-chart-o (alias)
Example of barcode
Example of bars
Example of bath
Example of bathtub (alias)
Example of battery (alias)
Example of battery-0 (alias)
Example of battery-1 (alias)
Example of battery-2 (alias)
Example of battery-3 (alias)
Example of battery-4 (alias)
Example of battery-empty
Example of battery-full
Example of battery-half
Example of battery-quarter
Example of battery-three-quarters
Example of bed
Example of beer
Example of bell
Example of bell-o
Example of bell-slash
Example of bell-slash-o
Example of bicycle
Example of binoculars
Example of birthday-cake
Example of blind
Example of bluetooth
Example of bluetooth-b
Example of bolt
Example of bomb
Example of book
Example of bookmark
Example of bookmark-o
Example of braille
Example of briefcase
Example of bug
Example of building
Example of building-o
Example of bullhorn
Example of bullseye
Example of bus
Example of cab (alias)
Example of calculator
Example of calendar
Example of calendar-check-o
Example of calendar-minus-o
Example of calendar-o
Example of calendar-plus-o
Example of calendar-times-o
Example of camera
Example of camera-retro
Example of car
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of cart-arrow-down
Example of cart-plus
Example of cc
Example of certificate
Example of check
Example of check-circle
Example of check-circle-o
Example of check-square
Example of check-square-o
Example of child
Example of circle
Example of circle-o
Example of circle-o-notch
Example of circle-thin
Example of clock-o
Example of clone
Example of close (alias)
Example of cloud
Example of cloud-download
Example of cloud-upload
Example of code
Example of code-fork
Example of coffee
Example of cog
Example of cogs
Example of comment
Example of comment-o
Example of commenting
Example of commenting-o
Example of comments
Example of comments-o
Example of compass
Example of copyright
Example of creative-commons
Example of credit-card
Example of credit-card-alt
Example of crop
Example of crosshairs
Example of cube
Example of cubes
Example of cutlery
Example of dashboard (alias)
Example of database
Example of deaf
Example of deafness (alias)
Example of desktop
Example of diamond
Example of dot-circle-o
Example of download
Example of drivers-license (alias)
Example of drivers-license-o (alias)
Example of edit (alias)
Example of ellipsis-h
Example of ellipsis-v
Example of envelope
Example of envelope-o
Example of envelope-open
Example of envelope-open-o
Example of envelope-square
Example of eraser
Example of exchange
Example of exclamation
Example of exclamation-circle
Example of exclamation-triangle
Example of external-link
Example of external-link-square
Example of eye
Example of eye-slash
Example of eyedropper
Example of fax
Example of feed (alias)
Example of female
Example of fighter-jet
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)
Example of film
Example of filter
Example of fire
Example of fire-extinguisher
Example of flag
Example of flag-checkered
Example of flag-o
Example of flash (alias)
Example of flask
Example of folder
Example of folder-o
Example of folder-open
Example of folder-open-o
Example of frown-o
Example of futbol-o
Example of gamepad
Example of gavel
Example of gear (alias)
Example of gears (alias)
Example of gift
Example of glass
Example of globe
Example of graduation-cap
Example of group (alias)
Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of handshake-o
Example of hard-of-hearing (alias)
Example of hashtag
Example of hdd-o
Example of headphones
Example of heart
Example of heart-o
Example of heartbeat
Example of history
Example of home
Example of hotel (alias)
Example of hourglass
Example of hourglass-1 (alias)
Example of hourglass-2 (alias)
Example of hourglass-3 (alias)
Example of hourglass-end
Example of hourglass-half
Example of hourglass-o
Example of hourglass-start
Example of i-cursor
Example of id-badge
Example of id-card
Example of id-card-o
Example of image (alias)
Example of inbox
Example of industry
Example of info
Example of info-circle
Example of institution (alias)
Example of key
Example of keyboard-o
Example of language
Example of laptop
Example of leaf
Example of legal (alias)
Example of lemon-o
Example of level-down
Example of level-up
Example of life-bouy (alias)
Example of life-buoy (alias)
Example of life-ring
Example of life-saver (alias)
Example of lightbulb-o
Example of line-chart
Example of location-arrow
Example of lock
Example of low-vision
Example of magic
Example of magnet
Example of mail-forward (alias)
Example of mail-reply (alias)
Example of mail-reply-all (alias)
Example of male
Example of map
Example of map-marker
Example of map-o
Example of map-pin
Example of map-signs
Example of meh-o
Example of microchip
Example of microphone
Example of microphone-slash
Example of minus
Example of minus-circle
Example of minus-square
Example of minus-square-o
Example of mobile
Example of mobile-phone (alias)
Example of money
Example of moon-o
Example of mortar-board (alias)
Example of motorcycle
Example of mouse-pointer
Example of music
Example of navicon (alias)
Example of newspaper-o
Example of object-group
Example of object-ungroup
Example of paint-brush
Example of paper-plane
Example of paper-plane-o
Example of paw
Example of pencil
Example of pencil-square
Example of pencil-square-o
Example of percent
Example of phone
Example of phone-square
Example of photo (alias)
Example of picture-o
Example of pie-chart
Example of plane
Example of plug
Example of plus
Example of plus-circle
Example of plus-square
Example of plus-square-o
Example of podcast
Example of power-off
Example of print
Example of puzzle-piece
Example of qrcode
Example of question
Example of question-circle
Example of question-circle-o
Example of quote-left
Example of quote-right
Example of random
Example of recycle
Example of refresh
Example of registered
Example of remove (alias)
Example of reorder (alias)
Example of reply
Example of reply-all
Example of retweet
Example of road
Example of rocket
Example of rss
Example of rss-square
Example of s15 (alias)
Example of search
Example of search-minus
Example of search-plus
Example of send (alias)
Example of send-o (alias)
Example of server
Example of share
Example of share-alt
Example of share-alt-square
Example of share-square
Example of share-square-o
Example of shield
Example of ship
Example of shopping-bag
Example of shopping-basket
Example of shopping-cart
Example of shower
Example of sign-in
Example of sign-language
Example of sign-out
Example of signal
Example of signing (alias)
Example of sitemap
Example of sliders
Example of smile-o
Example of snowflake-o
Example of soccer-ball-o (alias)
Example of sort
Example of sort-alpha-asc
Example of sort-alpha-desc
Example of sort-amount-asc
Example of sort-amount-desc
Example of sort-asc
Example of sort-desc
Example of sort-down (alias)
Example of sort-numeric-asc
Example of sort-numeric-desc
Example of sort-up (alias)
Example of space-shuttle
Example of spinner
Example of spoon
Example of square
Example of square-o
Example of star
Example of star-half
Example of star-half-empty (alias)
Example of star-half-full (alias)
Example of star-half-o
Example of star-o
Example of sticky-note
Example of sticky-note-o
Example of street-view
Example of suitcase
Example of sun-o
Example of support (alias)
Example of tablet
Example of tachometer
Example of tag
Example of tags
Example of tasks
Example of taxi
Example of television
Example of terminal
Example of thermometer (alias)
Example of thermometer-0 (alias)
Example of thermometer-1 (alias)
Example of thermometer-2 (alias)
Example of thermometer-3 (alias)
Example of thermometer-4 (alias)
Example of thermometer-empty
Example of thermometer-full
Example of thermometer-half
Example of thermometer-quarter
Example of thermometer-three-quarters
Example of thumb-tack
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up
Example of ticket
Example of times
Example of times-circle
Example of times-circle-o
Example of times-rectangle (alias)
Example of times-rectangle-o (alias)
Example of tint
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-off
Example of toggle-on
Example of toggle-right (alias)
Example of toggle-up (alias)
Example of trademark
Example of trash
Example of trash-o
Example of tree
Example of trophy
Example of truck
Example of tty
Example of tv (alias)
Example of umbrella
Example of universal-access
Example of university
Example of unlock
Example of unlock-alt
Example of unsorted (alias)
Example of upload
Example of user
Example of user-circle
Example of user-circle-o
Example of user-o
Example of user-plus
Example of user-secret
Example of user-times
Example of users
Example of vcard (alias)
Example of vcard-o (alias)
Example of video-camera
Example of volume-control-phone
Example of volume-down
Example of volume-off
Example of volume-up
Example of warning (alias)
Example of wheelchair
Example of wheelchair-alt
Example of wifi
Example of window-close
Example of window-close-o
Example of window-maximize
Example of window-minimize
Example of window-restore
Example of wrench

手势

Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up

辅助功能

Example of american-sign-language-interpreting
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of audio-description
Example of blind
Example of braille
Example of cc
Example of deaf
Example of deafness (alias)
Example of hard-of-hearing (alias)
Example of low-vision
Example of question-circle-o
Example of sign-language
Example of signing (alias)
Example of tty
Example of universal-access
Example of volume-control-phone
Example of wheelchair
Example of wheelchair-alt

运输

Example of ambulance
Example of automobile (alias)
Example of bicycle
Example of bus
Example of cab (alias)
Example of car
Example of fighter-jet
Example of motorcycle
Example of plane
Example of rocket
Example of ship
Example of space-shuttle
Example of subway
Example of taxi
Example of train
Example of truck
Example of wheelchair
Example of wheelchair-alt

性别

Example of genderless
Example of intersex (alias)
Example of mars
Example of mars-double
Example of mars-stroke
Example of mars-stroke-h
Example of mars-stroke-v
Example of mercury
Example of neuter
Example of transgender
Example of transgender-alt
Example of venus
Example of venus-double
Example of venus-mars

文件类型

Example of file
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-o
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-text
Example of file-text-o
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)

可旋转

Example of circle-o-notch
Example of cog
Example of gear (alias)
Example of refresh
Example of spinner

表单

Example of check-square
Example of check-square-o
Example of circle
Example of circle-o
Example of dot-circle-o
Example of minus-square
Example of minus-square-o
Example of plus-square
Example of plus-square-o
Example of square
Example of square-o

支付

Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of credit-card
Example of credit-card-alt
Example of google-wallet
Example of paypal

图表

Example of area-chart
Example of bar-chart
Example of bar-chart-o (alias)
Example of line-chart
Example of pie-chart

货币

Example of bitcoin (alias)
Example of btc
Example of cny (alias)
Example of dollar (alias)
Example of eur
Example of euro (alias)
Example of gbp
Example of gg
Example of gg-circle
Example of ils
Example of inr
Example of jpy
Example of krw
Example of money
Example of rmb (alias)
Example of rouble (alias)
Example of rub
Example of ruble (alias)
Example of rupee (alias)
Example of shekel (alias)
Example of sheqel (alias)
Example of try
Example of turkish-lira (alias)
Example of usd
Example of won (alias)
Example of yen (alias)

文本编辑

Example of align-center
Example of align-justify
Example of align-left
Example of align-right
Example of bold
Example of chain (alias)
Example of chain-broken
Example of clipboard
Example of columns
Example of copy (alias)
Example of cut (alias)
Example of dedent (alias)
Example of eraser
Example of file
Example of file-o
Example of file-text
Example of file-text-o
Example of files-o
Example of floppy-o
Example of font
Example of header
Example of indent
Example of italic
Example of link
Example of list
Example of list-alt
Example of list-ol
Example of list-ul
Example of outdent
Example of paperclip
Example of paragraph
Example of paste (alias)
Example of repeat
Example of rotate-left (alias)
Example of rotate-right (alias)
Example of save (alias)
Example of scissors
Example of strikethrough
Example of subscript
Example of superscript
Example of table
Example of text-height
Example of text-width
Example of th
Example of th-large
Example of th-list
Example of underline
Example of undo
Example of unlink (alias)

指示方向

Example of angle-double-down
Example of angle-double-left
Example of angle-double-right
Example of angle-double-up
Example of angle-down
Example of angle-left
Example of angle-right
Example of angle-up
Example of arrow-circle-down
Example of arrow-circle-left
Example of arrow-circle-o-down
Example of arrow-circle-o-left
Example of arrow-circle-o-right
Example of arrow-circle-o-up
Example of arrow-circle-right
Example of arrow-circle-up
Example of arrow-down
Example of arrow-left
Example of arrow-right
Example of arrow-up
Example of arrows
Example of arrows-alt
Example of arrows-h
Example of arrows-v
Example of caret-down
Example of caret-left
Example of caret-right
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of caret-up
Example of chevron-circle-down
Example of chevron-circle-left
Example of chevron-circle-right
Example of chevron-circle-up
Example of chevron-down
Example of chevron-left
Example of chevron-right
Example of chevron-up
Example of exchange
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of long-arrow-down
Example of long-arrow-left
Example of long-arrow-right
Example of long-arrow-up
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-right (alias)
Example of toggle-up (alias)

视频播放

Example of arrows-alt
Example of backward
Example of compress
Example of eject
Example of expand
Example of fast-backward
Example of fast-forward
Example of forward
Example of pause
Example of pause-circle
Example of pause-circle-o
Example of play
Example of play-circle
Example of play-circle-o
Example of random
Example of step-backward
Example of step-forward
Example of stop
Example of stop-circle
Example of stop-circle-o
Example of youtube-play

标志

  • 所有标志图标都分别是其所有者的注册商标。
  • 使用这些商标并不代表Font Awesome拥有它们。
  • 商标只应用在被提及相应的公司或产品时使用。

特别注意!

Adblock Plus 插件会通过设置“Remove Social Media Buttons”来移除 Font Awesome 的这些标志图标。然而我们并不会用一些特殊方法来强行显示。如果您认为这是一个错误，请向 Adblock Plus 报告这个问题。在Adblock Plus修复这个问题之前，您需要自行修改这些图标的类名来解决这个问题。
Example of 500px
Example of adn
Example of amazon
Example of android
Example of angellist
Example of apple
Example of bandcamp
Example of behance
Example of behance-square
Example of bitbucket
Example of bitbucket-square
Example of bitcoin (alias)
Example of black-tie
Example of bluetooth
Example of bluetooth-b
Example of btc
Example of buysellads
Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of chrome
Example of codepen
Example of codiepie
Example of connectdevelop
Example of contao
Example of css3
Example of dashcube
Example of delicious
Example of deviantart
Example of digg
Example of dribbble
Example of dropbox
Example of drupal
Example of edge
Example of eercast
Example of empire
Example of envira
Example of etsy
Example of expeditedssl
Example of fa (alias)
Example of facebook
Example of facebook-f (alias)
Example of facebook-official
Example of facebook-square
Example of firefox
Example of first-order
Example of flickr
Example of font-awesome
Example of fonticons
Example of fort-awesome
Example of forumbee
Example of foursquare
Example of free-code-camp
Example of ge (alias)
Example of get-pocket
Example of gg
Example of gg-circle
Example of git
Example of git-square
Example of github
Example of github-alt
Example of github-square
Example of gitlab
Example of gittip (alias)
Example of glide
Example of glide-g
Example of google
Example of google-plus
Example of google-plus-circle (alias)
Example of google-plus-official
Example of google-plus-square
Example of google-wallet
Example of gratipay
Example of grav
Example of hacker-news
Example of houzz
Example of html5
Example of imdb
Example of instagram
Example of internet-explorer
Example of ioxhost
Example of joomla
Example of jsfiddle
Example of lastfm
Example of lastfm-square
Example of leanpub
Example of linkedin
Example of linkedin-square
Example of linode
Example of linux
Example of maxcdn
Example of meanpath
Example of medium
Example of meetup
Example of mixcloud
Example of modx
Example of odnoklassniki
Example of odnoklassniki-square
Example of opencart
Example of openid
Example of opera
Example of optin-monster
Example of pagelines
Example of paypal
Example of pied-piper
Example of pied-piper-alt
Example of pied-piper-pp
Example of pinterest
Example of pinterest-p
Example of pinterest-square
Example of product-hunt
Example of qq
Example of quora
Example of ra (alias)
Example of ravelry
Example of rebel
Example of reddit
Example of reddit-alien
Example of reddit-square
Example of renren
Example of resistance (alias)
Example of safari
Example of scribd
Example of sellsy
Example of share-alt
Example of share-alt-square
Example of shirtsinbulk
Example of simplybuilt
Example of skyatlas
Example of skype
Example of slack
Example of slideshare
Example of snapchat
Example of snapchat-ghost
Example of snapchat-square
Example of soundcloud
Example of spotify
Example of stack-exchange
Example of stack-overflow
Example of steam
Example of steam-square
Example of stumbleupon
Example of stumbleupon-circle
Example of superpowers
Example of telegram
Example of tencent-weibo
Example of themeisle
Example of trello
Example of tripadvisor
Example of tumblr
Example of tumblr-square
Example of twitch
Example of twitter
Example of twitter-square
Example of usb
Example of viacoin
Example of viadeo
Example of viadeo-square
Example of vimeo
Example of vimeo-square
Example of vine
Example of vk
Example of wechat (alias)
Example of weibo
Example of weixin
Example of whatsapp
Example of wikipedia-w
Example of windows
Example of wordpress
Example of wpbeginner
Example of wpexplorer
Example of wpforms
Example of xing
Example of xing-square
Example of y-combinator
Example of y-combinator-square (alias)
Example of yahoo
Example of yc (alias)
Example of yc-square (alias)
Example of yelp
Example of yoast
Example of youtube
Example of youtube-play
Example of youtube-square

医疗

Example of ambulance
Example of h-square
Example of heart
Example of heart-o
Example of heartbeat
Example of hospital-o
Example of medkit
Example of plus-square
Example of stethoscope
Example of user-md
Example of wheelchair
Example of wheelchair-alt

最简单的方式：BootstrapCDN （由MaxCDN提供）

一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！

  1. 将以下代码粘贴到网页HTML代码的 <head> 部分.
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    当新版本发布时，BootstrapCDN需要一点时间来同步到最新版本。稍安勿躁 :)

  2. 参考示例，然后开始使用Font Awesome吧!

简单方式之一：使用默认CSS

如果您使用了默认的Bootstrap CSS样式，那么你可以使用这种方式来引入默认的Font Awesome CSS样式。

  1. 复制整个 font-awesome 文件夹到您的项目中。
  2. 在HTML的 <head> 中引用font-awesome.min.css。
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. 参考示例，然后开始使用Font Awesome吧!

简单方式之二：LESS Ruby Gem

使用 官方 Font Awesome LESS Ruby Gem 可以简单方便的将 Font Awesome LESS 集成到Rails项目中。由 @supercodepoet 维护。

  1. 将下面这行代码加入到应用的Gemfile中：
    gem 'font-awesome-less'
  2. 然后执行：
    $ bundle
  3. 或者自行安装：
    $ gem install font-awesome-less

简单方式之三：SASS Ruby Gem

使用 官方 Font Awesome SASS Ruby Gem 可以简单方便的将 Font Awesome SASS 集成到Rails项目中。由 @supercodepoet 维护。

  1. 将下面这行代码加入到应用的Gemfile中：
    gem 'font-awesome-sass'
  2. 然后执行：
    $ bundle
  3. 或者自行安装：
    $ gem install font-awesome-sass

进阶方式：自定义 LESS 或 SASS

使用LESS或SASS的方法来自定义 Font Awesome 4.7.0 。

  1. 复制 font-awesome/ 目录到您的项目中。
  2. 打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ，然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录。
    @fa-font-path:   "../font";

    字体路径是相对于编译的CSS目录。

  3. 如果使用了静态编译器，那么重新编译LESS或SASS文件。如果没有，那么现在应该一切OK了。
  4. 参考示例，然后开始使用Font Awesome吧!

需要支持IE7？

如果需要支持IE7，那真的十分抱歉。Font Awesome从4.1.0版本开始不再支持IE7， 但更早的版本仍然支持。您可以查看 3.2.1 的IE7支持说明。 然后呢，您可以去找那个非要支持IE7的人算账 :)

基本图标

fa-camera-retro

您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span> 才能更加语义化。

<i class="fa fa-camera-retro"></i> fa-camera-retro
  • 如果您修改了图标容器的字体大小，图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。

大图标

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • 如果图标的底部和顶部被截断了，您需要增加行高来解决此问题。

固定宽度

  Home   Library   Applications   Settings

使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

用于列表

  • List icons
  • can be used
  • as bullets
  • in lists

使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。

<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>

边框与对齐

…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.

使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。

<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.

动画

使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。

<i class="fa fa-spinner fa-spin"></i>
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                        <i class="fa fa-refresh fa-spin"></i>
                        <i class="fa fa-cog fa-spin"></i>
                        <i class="fa fa-spinner fa-pulse"></i>

CSS3动画不支持IE8-IE9。

旋转与翻转

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。

<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> icon-flip-vertical

组合使用

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

Bootstrap 3 示例

Delete Settings

Font Awesome
Version 4.7.0

User

Font Awesome 完全兼容 Bootstrap 的所有组件。

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.7.0</a>

<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
  <span class="fa fa-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

自定义CSS

您可以任意自定义修改 Font Awesome 的CSS样式表来实现您想要的效果。

星级评定（受 CSS Tricks 所启发）

获取帮助

使用Font Awesome的过程中遇到困难了？亦或碰到一个您认为没有正确显示的问题？很抱歉我没有时间来一一回复大家的邮件。 不过以下方式可能对您的情况有所帮助：

  1. 您可以阅读最新版本的怎样起步. 它将用最简单的方式告诉您怎样使用Font Awesome。
  2. 查阅Stack Overflow上 Font Awesome的相关问题。其他人或许也有与您相同的问题。
  3. 在Stack Overflow上也找不到问题的答案？ 那么可以提出一个新问题，然后 给我发送邮件 ，我或许有时间会看一看。

报告Bug

找到Font Awesome的Bug了？那么请直接在GitHub项目中报告就是了。不过请注意以下几点：

  1. 请表现得友好一些。Font Awesome是一个有爱的地方:)
  2. 请先 搜索 一下，也许这个Bug已经有人提交过了。
  3. 在提交任何问题之前，请先阅读由 Nicolas Gallagher 编写的 issue guidelines
  4. 如果以上几点都OK了，那么请 提交您的问题。

需要新图标

新图标几乎都是在 Font Awesome GitHub项目中提出需求的。 如果您也需要，那么这里有一些注意事项需要看看：

  1. 请表现得友好一些。Font Awesome是一个有爱的地方;)
  2. 请先 搜索 一下，也许您想增加的图标已经有人提交过了。
  3. 请在提出需求时注意以下几点，万分感激：
    • 为 新需求 添加标题 Icon request: 图标名称.
    • 举例说明一下您需要在哪些地方用到这个图标，怎么用？
    • 提交一两张单色图片，并确保这张图片能表达您所想要的内容。
  4. 具象化的对象将会诞生出优质的图标，而抽象的概念当然只能用抽象的内容来表现。 举个栗子，一个来表现幸福感的图标远不如一个笑脸图标好制作，也不够直接。

提交请求

您有解决Font Awesome中Bug的方法？或者您希望为它增添新的特性？非常感谢，但是也需要请您注意几点：
  1. 请不要提交任何新图标。
  2. Please submit all pull requests against *-wip branches.
  3. All pull requests submitted against master will be sumarily closed and this guide referenced.
  4. After doing everything above, feel free to submit a pull request.

项目里程碑

Want to keep up with what's planned for Font Awesome? Check out our milestones on the GitHub project.

字体许可

  • 适用于在以下目录下的所有桌面和webfont文件： font-awesome/fonts/.
  • License: SIL OFL 1.1
  • URL: http://scripts.sil.org/OFL

代码许可

文档许可

标志

  • 所有标志图标都分别是其所有者的注册商标。
  • 使用这些商标并不代表Font Awesome拥有它们。

感谢

感谢 @robmadole 和 @supercodepoet 对 图标设计的核查、建议、一些专业帮助，以及自始自终的陪伴。

特别感谢 @gtagliala 对于Font Awesome的 GitHub项目 中有关提交请求与意见建议的出色管理。