网页使用Font Awesome图标字体时，css定义 content 属性必不可少，如下所示：
- .offsite:after {
- font-family:FontAwesome;
- font-weight:normal;
- font-style:normal;
- margin:0px 0px 0px 3px;
- text-decoration:none;
- color:#c7c8c9;
- content:"\f08e"
- }
代码 \f08e 是一个超链接的箭头图标。 本文列举几百个常见图标的 content 代码，以供使用。
- icon-glass (\f000;)
- icon-music (\f001;)
- icon-search (\f002;)
- icon-envelope (\f003;)
- icon-heart (\f004;)
- icon-star (\f005;)
- icon-star-empty (\f006;)
- icon-user (\f007;)
- icon-film (\f008;)
- icon-th-large (\f009;)
- icon-th (\f00a;)
- icon-th-list (\f00b;)
- icon-ok (\f00c;)
- icon-remove (\f00d;)
- icon-zoom-in (\f00e;)
- icon-zoom-out (\f010;)
- icon-off (\f011;)
- icon-signal (\f012;)
- icon-cog (\f013;)
- icon-trash (\f014;)
- icon-home (\f015;)
- icon-file (\f016;)
- icon-time (\f017;)
- icon-road (\f018;)
- icon-download-alt (\f019;)
- icon-download (\f01a;)
- icon-upload (\f01b;)
- icon-inbox (\f01c;)
- icon-play-circle (\f01d;)
- icon-repeat (\f01e;)
- icon-refresh (\f021;)
- icon-list-alt (\f022;)
- icon-lock (\f023;)
- icon-flag (\f024;)
- icon-headphones(\f025;)
- icon-volume-off (\f026;)
- icon-volume-down (\f027;)
- icon-volume-up (\f028;)
- icon-qrcode (\f029;)
- icon-barcode (\f02a;)
- icon-tag (\f02b;)
- icon-tags (\f02c;)
- icon-book (\f02d;)
- icon-bookmark (\f02e;)
- icon-print (\f02f;)
- icon-camera (\f030;)
- icon-font (\f031;)
- icon-bold (\f032;)
- icon-italic (\f033;)
- icon-text-height (\f034;)
- icon-text-width (\f035;)
- icon-align-left (\f036;)
- icon-align-center (\f037;)
- icon-align-right (\f038;)
- icon-align-justify (\f039;)
- icon-list (\f03a;)
- icon-indent-left (\f03b;)
- icon-indent-right (\f03c;)
- icon-facetime-video (\f03d;)
- icon-picture (\f03e;)
- icon-pencil (\f040;)
- icon-map-marker(\f041;)
- icon-adjust (\f042;)
- icon-tint (\f043;)
- icon-edit (\f044;)
- icon-share (\f045;)
- icon-check (\f046;)
- icon-move (\f047;)
- icon-step-backward (\f048;)
- icon-fast-backward (\f049;)
- icon-backward (\f04a;)
- icon-play (\f04b;)
- icon-pause (\f04c;)
- icon-stop (\f04d;)
- icon-forward (\f04e;)
- icon-fast-forward(\f050;)
- icon-step-forward (\f051;)
- icon-eject (\f052;)
- icon-chevron-left (\f053;)
- icon-chevron-right (\f054;)
- icon-plus-sign (\f055;)
- icon-minus-sign (\f056;)
- icon-remove-sign(\f057;)
- icon-ok-sign (\f058;)
- icon-question-sign (\f059;)
- icon-info-sign (\f05a;)
- icon-screenshot (\f05b;)
- icon-remove-circle (\f05c;)
- icon-ok-circle (\f05d;)
- icon-ban-circle (\f05e;)
- icon-arrow-left (\f060;)
- icon-arrow-right (\f061;)
- icon-arrow-up (\f062;)
- icon-arrow-down (\f063;)
- icon-share-alt (\f064;)
- icon-resize-full (\f065;)
- icon-resize-small (\f066;)
- icon-plus (\f067;)
- icon-minus (\f068;)
- icon-asterisk (\f069;)
- icon-exclamation-sign (\f06a;)
- icon-gift (\f06b;)
- icon-leaf (\f06c;)
- icon-fire (\f06d;)
- icon-eye-open (\f06e;)
- icon-eye-close (\f070;)
- icon-warning-sign(\f071;)
- icon-plane (\f072;)
- icon-calendar (\f073;)
- icon-random (\f074;)
- icon-comment (\f075;)
- icon-magnet (\f076;)
- icon-chevron-up (\f077;)
- icon-chevron-down (\f078;)
- icon-retweet (\f079;)
- icon-shopping-cart (\f07a;)
- icon-folder-close (\f07b;)
- icon-folder-open (\f07c;)
- icon-resize-vertical (\f07d;)
- icon-resize-horizontal (\f07e;)
- icon-bar-chart (\f080;)
- icon-twitter-sign (\f081;)
- icon-facebook-sign (\f082;)
- icon-camera-retro (\f083;)
- icon-key (\f084;)
- icon-cogs (\f085;)
- icon-comments (\f086;)
- icon-thumbs-up (\f087;)
- icon-thumbs-down (\f088;)
- icon-star-half (\f089;)
- icon-heart-empty (\f08a;)
- icon-signout (\f08b;)
- icon-linkedin-sign(\f08c;)
- icon-pushpin (\f08d;)
- icon-external-link (\f08e;)
- icon-signin (\f090;)
- icon-trophy (\f091;)
- icon-github-sign (\f092;)
- icon-upload-alt (\f093;)
- icon-lemon (\f094;)
- icon-phone (\f095;)
- icon-check-empty(\f096;)
- icon-bookmark-empty (\f097;)
- icon-phone-sign (\f098;)
- icon-twitter (\f099;)
- icon-facebook (\f09a;)
- icon-github (\f09b;)
- icon-unlock (\f09c;)
- icon-credit-card (\f09d;)
- icon-rss (\f09e;)
- icon-hdd (\f0a0;)
- icon-bullhorn (\f0a1;)
- icon-bell (\f0a2;)
- icon-certificate (\f0a3;)
- icon-hand-right (\f0a4;)
- icon-hand-left (\f0a5;)
- icon-hand-up (\f0a6;)
- icon-hand-down (\f0a7;)
- icon-circle-arrow-left (\f0a8;)
- icon-circle-arrow-right (\f0a9;)
- icon-circle-arrow-up (\f0aa;)
- icon-circle-arrow-down (\f0ab;)
- icon-globe (\f0ac;)
- icon-wrench (\f0ad;)
- icon-tasks (\f0ae;)
- icon-filter (\f0b0;)
- icon-briefcase (\f0b1;)
- icon-fullscreen (\f0b2;)
- icon-group (\f0c0;)
- icon-link (\f0c1;)
- icon-cloud (\f0c2;)
- icon-beaker (\f0c3;)
- icon-cut (\f0c4;)
- icon-copy (\f0c5;)
- icon-paper-clip (\f0c6;)
- icon-save (\f0c7;)
- icon-sign-blank (\f0c8;)
- icon-reorder (\f0c9;)
- icon-list-ul (\f0ca;)
- icon-list-ol (\f0cb;)
- icon-strikethrough (\f0cc;)
- icon-underline (\f0cd;)
- icon-table (\f0ce;)
- icon-magic (\f0d0;)
- icon-truck (\f0d1;)
- icon-pinterest (\f0d2;)
- icon-pinterest-sign (\f0d3;)
- icon-google-plus-sign (\f0d4;)
- icon-google-plus (\f0d5;)
- icon-money (\f0d6;)
- icon-caret-down (\f0d7;)
- icon-caret-up (\f0d8;)
- icon-caret-left (\f0d9;)
- icon-caret-right (\f0da;)
- icon-columns (\f0db;)
- icon-sort (\f0dc;)
- icon-sort-down (\f0dd;)
- icon-sort-up (\f0de;)
- icon-envelope-alt(\f0e0;)
- icon-linkedin (\f0e1;)
- icon-undo (\f0e2;)
- icon-legal (\f0e3;)
- icon-dashboard (\f0e4;)
- icon-comment-alt(\f0e5;)
- icon-comments-alt (\f0e6;)
- icon-bolt (\f0e7;)
- icon-sitemap (\f0e8;)
- icon-umbrella (\f0e9;)
- icon-paste (\f0ea;)
- icon-lightbulb (\f0eb;)
- icon-exchange (\f0ec;)
- icon-cloud-download (\f0ed;)
- icon-cloud-upload (\f0ee;)
- icon-user-md (\f0f0;)
- icon-stethoscope (\f0f1;)
- icon-suitcase (\f0f2;)
- icon-bell-alt (\f0f3;)
- icon-coffee (\f0f4;)
- icon-food (\f0f5;)
- icon-file-alt (\f0f6;)
- icon-building (\f0f7;)
- icon-hospital (\f0f8;)
- icon-ambulance (\f0f9;)
- icon-medkit (\f0fa;)
- icon-fighter-jet (\f0fb;)
- icon-beer (\f0fc;)
- icon-h-sign (\f0fd;)
- icon-plus-sign-alt(\f0fe;)
- icon-double-angle-left (\f100;)
- icon-double-angle-right (\f101;)
- icon-double-angle-up (\f102;)
- icon-double-angle-down (\f103;)
- icon-angle-left (\f104;)
- icon-angle-right (\f105;)
- icon-angle-up (\f106;)
- icon-angle-down (\f107;)
- icon-desktop (\f108;)
- icon-laptop (\f109;)
- icon-tablet (\f10a;)
- icon-mobile-phone (\f10b;)
- icon-circle-blank (\f10c;)
- icon-quote-left (\f10d;)
- icon-quote-right (\f10e;)
- icon-spinner (\f110;)
- icon-circle (\f111;)
- icon-reply (\f112;)
在使用中，我们其实可以不用 content 属性类来输出font awesome图标，而是直接输出font awesome图标。如一个超链接图标可以这样写：
- <span class="icon-external-link" ></span>
当然我们要首先要写一个css引入font awesome图标字体库（注意文件路径），方法如下： - @font-face {
- font-family: 'FontAwesome';
- src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
- src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
- url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
- url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
- url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- .icon-external-link {
- font-family:FontAwesome;
- font-weight: normal;
- font-style: normal;
- }
不用 content 属性类来输出font awesome图标这个写法，图标代码同样跟 content 的代码一样，只不过要把前面的反斜杠“\”换为“&#x”。
| 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
