好吧，既然装了wordpress，第一篇文章就写一个在wordpress中遇到的一个问题，就是wordpress中能够巧妙的显示社交网站的logo而不出现，而这种方法实际上可以不止用于社交网络logo的显示，其他只要是logo都可以通过这种方式实现。

通常我们认为网站的logo通过png的格式显示，但是常用的logo通常在会多次使用，比如社交网络的logo。当然大可建一个文件夹把所用常用的logo放进去，然后每次用到哪个进去找，但是这样相对繁琐。wordpress用到了我之前没有考虑到一种巧妙办法（相信很多其他网站也在使用），就是吧logo做到字体里面并使用unicode将这些logo编码到/f0000以上的位置，这些位置本身就没有文字，如此一来只要打出相应的unicode就可以使文章显示出对应的logo了。

举例说明：

将wordpress的twenty sixteen博客中的logo字体用百度字体编辑器（难得百度还有一款良心产品）打开，可以看到下面的效果：

在上面的图中很显然的看见了Facebook($f204)、Google Plus($f206)、LinkedIn($f207)，甚至还有Github、Tumblr一些相对不常见的平台的logo。而style.css文件中如此定义：

.menu-item-has-children a:after,
.social-navigation a:before,
.dropdown-toggle:after,
.bypostauthor > article .fn:after,
.comment-reply-title small a:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .nav-links:before,
.pagination .nav-links:after,
.search-submit:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: "Genericons";
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	speak: none;
	text-align: center;
	text-decoration: inherit;
	text-transform: none;
	vertical-align: top;
}


.social-navigation a:hover:before,
.social-navigation a:focus:before {
	color: #007acc;
}

.social-navigation a[href*="facebook.com"]:before {
	content: "\f203";
}

.social-navigation a[href*="plus.google.com"]:before {
	content: "\f206";
}

.social-navigation a[href*="github.com"]:before {
	content: "\f200";
}

.social-navigation a[href*="instagram.com"]:before {
	content: "\f215";
}

.social-navigation a[href*="linkedin.com"]:before {
	content: "\f208";
}

.social-navigation a[href*="tumblr.com"]:before {
	content: "\f214";
}

.social-navigation a[href*="twitter.com"]:before {
	content: "\f202";
}

页面篇幅有限，css文件没有列举全面。

可以看出通过这种方式，直接将需要的logo显示出来，而且这样有非常明显的好处，只需要相对应的字体文件和css 文件就可以反复使用，减少了打开网页的过程的文件加载数量，当然不足也是十分明显的，这个方法指针对纯色的logo有意义，连不同的颜色深度都不可能。但是考虑到近些年扁平化色块化的趋势，这个缺点并不十分严重。

需要注意的是，这种方案使用的字体随网站而异，也随wordpress模板而异，所以在使用不同网站不能盲目的套wordpress的css文件。

---

经过一段摸索，我发现了这种方案的来源：FontAwesome，中文翻译站可以看这个

FontAwesome提供了一个全方面的字体图标库，可以直接用这个简单的添加常用图标，还可以通过css轻松地缩放图标的大小，十分方便