像百科一样 巧妙插入导出链接图标

不少人应该注意到在维基百科或是百度百科上导出链接后面那个小图标吗?从浏览体验来讲,这是一个不错的视觉提醒,告诉用户点击这个链接将去向第三方网站,很贴心的一种设计。当然,我们也可以用到自己的网站上,只要导出链接是去第三方网站就会自动出现这个小图标。

百科导出链接图标

方法很简单,请跟着爆老师来改。

第一步,找一个类似的小图标,你可以免费在这里找或直接用爆老师的这个 百科导出链接图标

第二步,把你的小图标上传到你的网站文件夹下,比如WP系统的就放到
/wp-content/themes/twentyfourteen/images/,命名图标文件叫做external-icon.png

第三步,找到控制你内容的style文件,比如stylesheet.css,打开它后,拷贝粘贴以下代码到空白行中,保存更新:

a[href^="http://"]:not([href*="yoursite.com"]):after,
a[href^="https://"]:not([href*="yoursite.com"]):after {
content: “” url(‘/images/external-icon.png’);
padding-left:5px;
}

注意:请将yoursite.com 替换成你的域名,不要加www;/images/external-icon.png 替换成你自己图标的路径。
这段代码的意思就是当A标签下的链接不含自己域名时(即认为是导出链接)在链接后方插入一个小图标。

好了回到自己网站刷新一下,看看导出链接后面是不是多了一个小图标呢?

返回到咨道一问 | | 作者:爆老师 Boson 发表于 10/14/2014

『欢迎大家在下方参与(像百科一样 巧妙插入导出链接图标)评论和分享』


在线咨询