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

网站优化评论581阅读模式

有很多博友都喜欢在自己的网站友情链接上添加 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 图标

结束语

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

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。
夏日阳光
  • 本文由 发表于 2022年10月30日 15:35:09
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/229.html
匿名

发表评论

匿名网友 填写信息