如何优雅地在网站友情链接前面添加 Logo 图标

有很多博友都喜欢在自己的网站友情链接上添加 Logo 图标，这样会显得高端大气上档次，但是，搜索引擎对图片的抓取技术还不是很成熟，图片链接不是很友好，所以，给友情链接添加图标后，如何还能让它是文字链接，就需要我们来优化处理一下。

解决思路

给友情链接添加图标，我们一般是在友情链接文字前面添加一个小图片，可以改为给文字添加背景图片的形式，通过调整样式，同样可以达到在友情链接前面添加图标的效果。

实现代码

先给链接添加背景图片，然后再调整背景图片的样式。

1. 添加背景图片

添加背景图片，其中背景图片是友链网站的 Favicon 图标，CSS 代码：

.links-box ul:nth-of-type(1) a {
    background-image: url(https://www.pieruo.com/api/favicon/www.xgboke.com.jpg);
}
.links-box ul:nth-of-type(2) a {
    background-image: url(https://www.pieruo.com/api/favicon/www.vpsgo.com.jpg);
}
.links-box ul:nth-of-type(3) a {
    background-image: url(https://www.pieruo.com/api/favicon/www.cnjoel.com.png);
}
.links-box ul:nth-of-type(4) a {
    background-image: url(https://www.pieruo.com/api/favicon/www.my1981.cn.jpg);
}
...

2. 调整背景样式

调整背景图片的位置及大小，并且让链接名称向右偏移一定距离，CSS 代码：

.links-box ul a {
    background-position: calc(50% - 30px) 10px !important; // 背景图片由中心位置向左偏移30px，且距离顶部间距为10px
    background-size: 16px 16px !important; // 背景图片尺寸为16px*16px
    padding-left: 26px; // 链接文字向右偏移26px
    background-repeat: no-repeat; // 背景图片不平铺
}

预览效果

预览效果如下：

结束语

用网站 Logo 图片做友链虽然很美观，但是，用关键词做友情链接会更有利于网站优化。今天为大家分享了一下友情链接添加图标后优化为文字链接的方法，供有此需求的朋友参考。如果有任何意见或建议，欢迎在下方评论处留言。