网页使用Font Awesome图标字体时，css定义 content 属性

网页使用Font Awesome图标字体时，css定义 content 属性必不可少，如下所示：

.icon:before {
    content: '\f005';
    font-family: FontAwesome;
}

代码 \f005 是一个星星的图标对应代码是.fa-star。

不用 content 属性类来输出font awesome图标这个写法，图标代码同样跟 content 的代码一样，只不过要把前面的反斜杠“\”换为“&#x”。

附上图标类对应的字符编码表：

NAMECODENAMECODE.fa-glass\f000.fa-github-alt\f113.fa-music\f001.fa-folder-o\f114.fa-search\f002.fa-folder-open-o\f115.fa-envelope-o\f003.fa-smile-o\f118.fa-heart\f004.fa-frown-o\f119.fa-star\f005.fa-meh-o\f11a.fa-star-o\f006.fa-gamepad\f11b.fa-user\f007.fa-keyboard-o\f11c.fa-film\f008.fa-flag-o\f11d.fa-th-large\f009.fa-flag-checkered\f11e.fa-th\f00a.fa-terminal\f120.fa-th-list\f00b.fa-code\f121.fa-check\f00c.fa-mail-reply-all\f122.fa-remove\f00d.fa-reply-all\f122.fa-close\f00d.fa-star-half-empty\f123.fa-times\f00d.fa-star-half-full\f123.fa-search-plus\f00e.fa-star-half-o\f123.fa-search-minus\f010.fa-location-arrow\f124.fa-power-off\f011.fa-crop\f125.fa-signal\f012.fa-code-fork\f126.fa-gear\f013.fa-unlink\f127.fa-cog\f013.fa-chain-broken\f127.fa-trash-o\f014.fa-question\f128.fa-home\f015.fa-info\f129.fa-file-o\f016.fa-exclamation\f12a.fa-clock-o\f017.fa-superscript\f12b.fa-road\f018.fa-subscript\f12c.fa-download\f019.fa-eraser\f12d.fa-arrow-circle-o-down\f01a.fa-puzzle-piece\f12e.fa-arrow-circle-o-up\f01b.fa-microphone\f130.fa-inbox\f01c.fa-microphone-slash\f131.fa-play-circle-o\f01d.fa-shield\f132.fa-rotate-right\f01e.fa-calendar-o\f133.fa-repeat\f01e.fa-fire-extinguisher\f134.fa-refresh\f021.fa-rocket\f135.fa-list-alt\f022.fa-maxcdn\f136.fa-lock\f023.fa-chevron-circle-left\f137.fa-flag\f024.fa-chevron-circle-right\f138.fa-headphones\f025.fa-chevron-circle-up\f139.fa-volume-off\f026.fa-chevron-circle-down\f13a.fa-volume-down\f027.fa-html5\f13b.fa-volume-up\f028.fa-css3\f13c.fa-qrcode\f029.fa-anchor\f13d.fa-barcode\f02a.fa-unlock-alt\f13e.fa-tag\f02b.fa-bullseye\f140.fa-tags\f02c.fa-ellipsis-h\f141.fa-book\f02d.fa-ellipsis-v\f142.fa-bookmark\f02e.fa-rss-square\f143.fa-print\f02f.fa-play-circle\f144.fa-camera\f030.fa-ticket\f145.fa-font\f031.fa-minus-square\f146.fa-bold\f032.fa-minus-square-o\f147.fa-italic\f033.fa-level-up\f148.fa-text-height\f034.fa-level-down\f149.fa-text-width\f035.fa-check-square\f14a.fa-align-left\f036.fa-pencil-square\f14b.fa-align-center\f037.fa-external-link-square\f14c.fa-align-right\f038.fa-share-square\f14d.fa-align-justify\f039.fa-compass\f14e.fa-list\f03a.fa-toggle-down\f150.fa-dedent\f03b.fa-caret-square-o-down\f150.fa-outdent\f03b.fa-toggle-up\f151.fa-indent\f03c.fa-caret-square-o-up\f151.fa-video-camera\f03d.fa-toggle-right\f152.fa-photo\f03e.fa-caret-square-o-right\f152.fa-image\f03e.fa-euro\f153.fa-picture-o\f03e.fa-eur\f153.fa-pencil\f040.fa-gbp\f154.fa-map-marker\f041.fa-dollar\f155.fa-adjust\f042.fa-usd\f155.fa-tint\f043.fa-rupee\f156.fa-edit\f044.fa-inr\f156.fa-pencil-square-o\f044.fa-cny\f157.fa-share-square-o\f045.fa-rmb\f157.fa-check-square-o\f046.fa-yen\f157.fa-arrows\f047.fa-jpy\f157.fa-step-backward\f048.fa-ruble\f158.fa-fast-backward\f049.fa-rouble\f158.fa-backward\f04a.fa-rub\f158.fa-play\f04b.fa-won\f159.fa-pause\f04c.fa-krw\f159.fa-stop\f04d.fa-bitcoin\f15a.fa-forward\f04e.fa-btc\f15a.fa-fast-forward\f050.fa-file\f15b.fa-step-forward\f051.fa-file-text\f15c.fa-eject\f052.fa-sort-alpha-asc\f15d.fa-chevron-left\f053.fa-sort-alpha-desc\f15e.fa-chevron-right\f054.fa-sort-amount-asc\f160.fa-plus-circle\f055.fa-sort-amount-desc\f161.fa-minus-circle\f056.fa-sort-numeric-asc\f162.fa-times-circle\f057.fa-sort-numeric-desc\f163.fa-check-circle\f058.fa-thumbs-up\f164.fa-question-circle\f059.fa-thumbs-down\f165.fa-info-circle\f05a.fa-youtube-square\f166.fa-crosshairs\f05b.fa-youtube\f167.fa-times-circle-o\f05c.fa-xing\f168.fa-check-circle-o\f05d.fa-xing-square\f169.fa-ban\f05e.fa-youtube-play\f16a.fa-arrow-left\f060.fa-dropbox\f16b.fa-arrow-right\f061.fa-stack-overflow\f16c.fa-arrow-up\f062.fa-instagram\f16d.fa-arrow-down\f063.fa-flickr\f16e.fa-mail-forward\f064.fa-adn\f170.fa-share\f064.fa-bitbucket\f171.fa-expand\f065.fa-bitbucket-square\f172.fa-compress\f066.fa-tumblr\f173.fa-plus\f067.fa-tumblr-square\f174.fa-minus\f068.fa-long-arrow-down\f175.fa-asterisk\f069.fa-long-arrow-up\f176.fa-exclamation-circle\f06a.fa-long-arrow-left\f177.fa-gift\f06b.fa-long-arrow-right\f178.fa-leaf\f06c.fa-apple\f179.fa-fire\f06d.fa-windows\f17a.fa-eye\f06e.fa-android\f17b.fa-eye-slash\f070.fa-linux\f17c.fa-warning\f071.fa-dribbble\f17d.fa-exclamation-triangle\f071.fa-skype\f17e.fa-plane\f072.fa-foursquare\f180.fa-calendar\f073.fa-trello\f181.fa-random\f074.fa-female\f182.fa-comment\f075.fa-male\f183.fa-magnet\f076.fa-gittip\f184.fa-chevron-up\f077.fa-sun-o\f185.fa-chevron-down\f078.fa-moon-o\f186.fa-retweet\f079.fa-archive\f187.fa-shopping-cart\f07a.fa-bug\f188.fa-folder\f07b.fa-vk\f189.fa-folder-open\f07c.fa-weibo\f18a.fa-arrows-v\f07d.fa-renren\f18b.fa-arrows-h\f07e.fa-pagelines\f18c.fa-bar-chart-o\f080.fa-stack-exchange\f18d.fa-bar-chart\f080.fa-arrow-circle-o-right\f18e.fa-twitter-square\f081.fa-arrow-circle-o-left\f190.fa-facebook-square\f082.fa-toggle-left\f191.fa-camera-retro\f083.fa-caret-square-o-left\f191.fa-key\f084.fa-dot-circle-o\f192.fa-gears\f085.fa-wheelchair\f193.fa-cogs\f085.fa-vimeo-square\f194.fa-comments\f086.fa-turkish-lira\f195.fa-thumbs-o-up\f087.fa-try\f195.fa-thumbs-o-down\f088.fa-plus-square-o\f196.fa-star-half\f089.fa-space-shuttle\f197.fa-heart-o\f08a.fa-slack\f198.fa-sign-out\f08b.fa-envelope-square\f199.fa-linkedin-square\f08c.fa-wordpress\f19a.fa-thumb-tack\f08d.fa-openid\f19b.fa-external-link\f08e.fa-institution\f19c.fa-sign-in\f090.fa-bank\f19c.fa-trophy\f091.fa-university\f19c.fa-github-square\f092.fa-mortar-board\f19d.fa-upload\f093.fa-graduation-cap\f19d.fa-lemon-o\f094.fa-yahoo\f19e.fa-phone\f095.fa-google\f1a0.fa-square-o\f096.fa-reddit\f1a1.fa-bookmark-o\f097.fa-reddit-square\f1a2.fa-phone-square\f098.fa-stumbleupon-circle\f1a3.fa-twitter\f099.fa-stumbleupon\f1a4.fa-facebook\f09a.fa-delicious\f1a5.fa-github\f09b.fa-digg\f1a6.fa-unlock\f09c.fa-pied-piper\f1a7.fa-credit-card\f09d.fa-pied-piper-alt\f1a8.fa-rss\f09e.fa-drupal\f1a9.fa-hdd-o\f0a0.fa-joomla\f1aa.fa-bullhorn\f0a1.fa-language\f1ab.fa-bell\f0f3.fa-fax\f1ac.fa-certificate\f0a3.fa-building\f1ad.fa-hand-o-right\f0a4.fa-child\f1ae.fa-hand-o-left\f0a5.fa-paw\f1b0.fa-hand-o-up\f0a6.fa-spoon\f1b1.fa-hand-o-down\f0a7.fa-cube\f1b2.fa-arrow-circle-left\f0a8.fa-cubes\f1b3.fa-arrow-circle-right\f0a9.fa-behance\f1b4.fa-arrow-circle-up\f0aa.fa-behance-square\f1b5.fa-arrow-circle-down\f0ab.fa-steam\f1b6.fa-globe\f0ac.fa-steam-square\f1b7.fa-wrench\f0ad.fa-recycle\f1b8.fa-tasks\f0ae.fa-automobile\f1b9.fa-filter\f0b0.fa-car\f1b9.fa-briefcase\f0b1.fa-cab\f1ba.fa-arrows-alt\f0b2.fa-taxi\f1ba.fa-group\f0c0.fa-tree\f1bb.fa-users\f0c0.fa-spotify\f1bc.fa-chain\f0c1.fa-deviantart\f1bd.fa-link\f0c1.fa-soundcloud\f1be.fa-cloud\f0c2.fa-database\f1c0.fa-flask\f0c3.fa-file-pdf-o\f1c1.fa-cut\f0c4.fa-file-word-o\f1c2.fa-scissors\f0c4.fa-file-excel-o\f1c3.fa-copy\f0c5.fa-file-powerpoint-o\f1c4.fa-files-o\f0c5.fa-file-photo-o\f1c5.fa-paperclip\f0c6.fa-file-picture-o\f1c5.fa-save\f0c7.fa-file-image-o\f1c5.fa-floppy-o\f0c7.fa-file-zip-o\f1c6.fa-square\f0c8.fa-file-archive-o\f1c6.fa-navicon\f0c9.fa-file-sound-o\f1c7.fa-reorder\f0c9.fa-file-audio-o\f1c7.fa-bars\f0c9.fa-file-movie-o\f1c8.fa-list-ul\f0ca.fa-file-video-o\f1c8.fa-list-ol\f0cb.fa-file-code-o\f1c9.fa-strikethrough\f0cc.fa-vine\f1ca.fa-underline\f0cd.fa-codepen\f1cb.fa-table\f0ce.fa-jsfiddle\f1cc.fa-magic\f0d0.fa-life-bouy\f1cd.fa-truck\f0d1.fa-life-buoy\f1cd.fa-pinterest\f0d2.fa-life-saver\f1cd.fa-pinterest-square\f0d3.fa-support\f1cd.fa-google-plus-square\f0d4.fa-life-ring\f1cd.fa-google-plus\f0d5.fa-circle-o-notch\f1ce.fa-money\f0d6.fa-ra\f1d0.fa-caret-down\f0d7.fa-rebel\f1d0.fa-caret-up\f0d8.fa-ge\f1d1.fa-caret-left\f0d9.fa-empire\f1d1.fa-caret-right\f0da.fa-git-square\f1d2.fa-columns\f0db.fa-git\f1d3.fa-unsorted\f0dc.fa-hacker-news\f1d4.fa-sort\f0dc.fa-tencent-weibo\f1d5.fa-sort-down\f0dd.fa-qq\f1d6.fa-sort-desc\f0dd.fa-wechat\f1d7.fa-sort-up\f0de.fa-weixin\f1d7.fa-sort-asc\f0de.fa-send\f1d8.fa-envelope\f0e0.fa-paper-plane\f1d8.fa-linkedin\f0e1.fa-send-o\f1d9.fa-rotate-left\f0e2.fa-paper-plane-o\f1d9.fa-undo\f0e2.fa-history\f1da.fa-legal\f0e3.fa-circle-thin\f1db.fa-gavel\f0e3.fa-header\f1dc.fa-dashboard\f0e4.fa-paragraph\f1dd.fa-tachometer\f0e4.fa-sliders\f1de.fa-comment-o\f0e5.fa-share-alt\f1e0.fa-comments-o\f0e6.fa-share-alt-square\f1e1.fa-flash\f0e7.fa-bomb\f1e2.fa-bolt\f0e7.fa-soccer-ball-o\f1e3.fa-sitemap\f0e8.fa-futbol-o\f1e3.fa-umbrella\f0e9.fa-tty\f1e4.fa-paste\f0ea.fa-binoculars\f1e5.fa-clipboard\f0ea.fa-plug\f1e6.fa-lightbulb-o\f0eb.fa-slideshare\f1e7.fa-exchange\f0ec.fa-twitch\f1e8.fa-cloud-download\f0ed.fa-yelp\f1e9.fa-cloud-upload\f0ee.fa-newspaper-o\f1ea.fa-user-md\f0f0.fa-wifi\f1eb.fa-stethoscope\f0f1.fa-calculator\f1ec.fa-suitcase\f0f2.fa-paypal\f1ed.fa-bell-o\f0a2.fa-google-wallet\f1ee.fa-coffee\f0f4.fa-cc-visa\f1f0.fa-cutlery\f0f5.fa-cc-mastercard\f1f1.fa-file-text-o\f0f6.fa-cc-discover\f1f2.fa-building-o\f0f7.fa-cc-amex\f1f3.fa-hospital-o\f0f8.fa-cc-paypal\f1f4.fa-ambulance\f0f9.fa-cc-stripe\f1f5.fa-medkit\f0fa.fa-bell-slash\f1f6.fa-fighter-jet\f0fb.fa-bell-slash-o\f1f7.fa-beer\f0fc.fa-trash\f1f8.fa-h-square\f0fd.fa-copyright\f1f9.fa-plus-square\f0fe.fa-at\f1fa.fa-angle-double-left\f100.fa-eyedropper\f1fb.fa-angle-double-right\f101.fa-paint-brush\f1fc.fa-angle-double-up\f102.fa-birthday-cake\f1fd.fa-angle-double-down\f103.fa-area-chart\f1fe.fa-angle-left\f104.fa-pie-chart\f200.fa-angle-right\f105.fa-line-chart\f201.fa-angle-up\f106.fa-lastfm\f202.fa-angle-down\f107.fa-lastfm-square\f203.fa-desktop\f108.fa-toggle-off\f204.fa-laptop\f109.fa-toggle-on\f205.fa-tablet\f10a.fa-bicycle\f206.fa-mobile-phone\f10b.fa-bus\f207.fa-mobile\f10b.fa-ioxhost\f208.fa-circle-o\f10c.fa-angellist\f209.fa-quote-left\f10d.fa-cc\f20a.fa-quote-right\f10e.fa-shekel\f20b.fa-spinner\f110.fa-sheqel\f20b.fa-circle\f111.fa-ils\f20b.fa-mail-reply\f112.fa-meanpath\f20c.fa-reply\f112