Icon Font ,或者说 Web font 是什么不用说了,还不懂的请自行补脑。Genericons 是由官网 WordPress 的母公司 Automattic 开发的一个 Icon Font 项目,类似的有 Fontello、Font Awesome。
WordPress 项目中,尤其是一些国外开发者开发的 WP 主题,作者喜欢采用 Genericons 的字体图标,并且以特定方式展示图标,即不是将其嵌入 HTML 文件中,而是将其嵌入 style.css 中,例如:
// style.css
.social-navigation a[href*="dropbox.com"]:before {
font-family:"Genericons";
content: "\f225";
}
上面这段代码中有趣的一点是【content: "\f225";】,它是用于显示 Dropbox 图标的特定 Unicode 编码。然而这些特定的 Unicode 编码在 [Genericons 官网](http://genericons.com/ 或 [项目GitHub](https://github.com/Automattic/genericons-neue 上都是找不到的。
下面,将会展示 Genericons 字体图标对应的 Unicode 编码。
activity <--> \f508
anchor <--> \f509
aside <--> \f101
attachment <--> \f416
audio <--> \f109
bold <--> \f471
book <--> \f444
bug <--> \f50a
cart <--> \f447
category <--> \f301
chat <--> \f108
checkmark <--> \f418
close <--> \f405
close-alt <--> \f406
cloud <--> \f426
cloud-download <--> \f440
cloud-upload <--> \f441
code <--> \f462
codepen <--> \f216
cog <--> \f445
collapse <--> \f432
comment <--> \f300
day <--> \f305
digg <--> \f221
document <--> \f443
dot <--> \f428
downarrow <--> \f502
download <--> \f50b
draggable <--> \f436
dribbble <--> \f201
dropbox <--> \f225
dropdown <--> \f433
dropdown-left <--> \f434
edit <--> \f411
ellipsis <--> \f476
expand <--> \f431
external <--> \f442
facebook <--> \f203
facebook-alt <--> \f204
fastforward <--> \f458
feed <--> \f413
flag <--> \f468
flickr <--> \f211
foursquare <--> \f226
fullscreen <--> \f474
gallery <--> \f103
github <--> \f200
googleplus <--> \f206
googleplus-alt <--> \f218
handset <--> \f50c
heart <--> \f461
help <--> \f457
hide <--> \f404
hierarchy <--> \f505
home <--> \f409
image <--> \f102
info <--> \f455
instagram <--> \f215
italic <--> \f472
key <--> \f427
leftarrow <--> \f503
link <--> \f107
linkedin <--> \f207
linkedin-alt <--> \f208
location <--> \f417
lock <--> \f470
mail <--> \f410
maximize <--> \f422
menu <--> \f419
microphone <--> \f50d
minimize <--> \f421
minus <--> \f50e
month <--> \f307
move <--> \f50f
next <--> \f429
notice <--> \f456
paintbrush <--> \f506
path <--> \f219
pause <--> \f448
phone <--> \f437
picture <--> \f473
pinned <--> \f308
pinterest <--> \f209
pinterest-alt <--> \f210
play <--> \f452
plugin <--> \f439
plus <--> \f510
pocket <--> \f224
polldaddy <--> \f217
portfolio <--> \f460
previous <--> \f430
print <--> \f469
quote <--> \f106
rating-empty <--> \f511
rating-full <--> \f512
rating-half <--> \f513
reddit <--> \f222
refresh <--> \f420
reply <--> \f412
reply-alt <--> \f466
reply-single <--> \f467
rewind <--> \f459
rightarrow <--> \f501
search <--> \f400
send-to-phone <--> \f438
send-to-tablet <--> \f454
share <--> \f415
show <--> \f403
shuffle <--> \f514
sitemap <--> \f507
skip-ahead <--> \f451
skip-back <--> \f450
skype <--> \f220
spam <--> \f424
spotify <--> \f515
standard <--> \f100
star <--> \f408
status <--> \f105
stop <--> \f449
stumbleupon <--> \f223
subscribe <--> \f463
subscribed <--> \f465
summary <--> \f425
tablet <--> \f453
tag <--> \f302
time <--> \f303
top <--> \f435
trash <--> \f407
tumblr <--> \f214
twitch <--> \f516
twitter <--> \f202å
unapprove <--> \f446
unsubscribe <--> \f464
unzoom <--> \f401
uparrow <--> \f500
user <--> \f304
video <--> \f104
videocamera <--> \f517
vimeo <--> \f212
warning <--> \f414
website <--> \f475
week <--> \f306
wordpress <--> \f205
xpost <--> \f504
youtube <--> \f213
zoom <--> \f402