Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用

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

有些情况下,我们不得不使用伪元素::before 和 ::after来实现fontawesome的小图标,所以我收集了一下图标类对应的字符编码表:
NAME CODE NAME CODE
.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    
 
(.fa-mail-reply \f112                              .fa-meanpath \f20c             注意这样区分,一行是俩个图标)
1
2018-03-09

1 个评论

欢迎多分享类似的知识性的内容。

要回复文章请先登录注册