自动为Zblog网站外链添加个性化图标

不难发现，许多比较精致的站长，尤其是WP博主，喜欢在外链后面添加一个小小的个性化图标，怎么实现的呢？百度搜索了一下，并没有得到想要的答案，只有自己研究了。本文以Awesome字体图标为例，阐述一下莹莹为Zblog网站外链自动添加个性化图标的方法，因此想要真正实现预想的效果，首先您的网站需要集成Awesome或者任意其他矢量字体图标（也可以用图片代替）。

随便找出来一篇有外链的文章打开，右键审查元素，查看a链接所在的块级元素。如下图，莹莹所在网站的a标签位于class“kan”的下方。

打开主题css文件（通常位于主题根目录下的style文件夹），尝试添加以下代码：

.kan a:after{left:0;content:"\00AB"}

清空缓存后重新编译，清空浏览器缓存，刷新页面，发现这样确实可以实现外链添加个性化图标，可不幸的是，文章内链也被添加了同样的图标，修改后代码：

.kan a[rel="external nofollow"]:after{left:0;content:"\00AB"}

添加了一个rel="external nofollow"，完美屏蔽了内链，真正实现了只在外部链接后方显示。同时您也可以按照这种方法再给外链前面加一个图标。

.kan a[rel="external nofollow"]:before{right:0;content:"\00BB"}

最终实现的效果就是这个样子的，并且以后您发布的所有外链，均会自动添加这两个图标。当然，您也可以在Awesome图标库选择自己喜欢的其他样式，暂未集成的可以尝试用图片代替。