知更鸟begin主题“关于本站–微信、QQ、微博、订阅”四个图标美化教程

8
1,448 views

A+

使用知更鸟主题的小伙伴都会发现，在“关于本站”下面有四个联系方式图标(姑且先这么叫吧，我也不知道正规名称是什么)。但是，主题默认的四个图标是暗色系“灰色”的，很不美观，与站长的要求相差甚远。在浏览别的个人博客时发现，虽然同是知更鸟主题，但是这些网站的图标都美化了，站长甚是喜欢，苦于自己能力有限，网上也没有找到相应的教程，就一直没有实现图标美化工作。但是，经过站长的不断学习和不懈努力~自夸下还是实现了图标美化。后来想想，还是自己的能力有限，不会扒代码。在此，记录下美化的过程，留个帖子，方便日后升级主题时的再次使用。也分享给像我一样的“白白菜鸟”。“老鸟们”请忽略，一看而过。

美化后效果，如下图：

　　代码部署过程如下：

打开style.css，找到

#feed_widget a {
color: #3690cf;
width: 40px;
display: block;
text-align: center;
height: 40px;
line-height: 34px;
margin: 0 auto;
border-radius: 4px;
border: 1px solid #ddd;
}

修改为：

#feed_widget a {
color: #999;
width: 40px;
display: block;
text-align: center;
height: 40px;
line-height: 34px;
margin: 0 auto;
border-radius: 20px;
border: 1px solid #ddd;
}

再次，在以下代码

#feed_widget a:hover {
color: #fff;
border: 1px solid #fff
}

和以下代码

#feed_widget .be {
font-size: 18px !important;
font-size: 1.8rem !important;
}

之间，添加如下代码：

此处为隐藏的内容！

发表评论并刷新，才能查看

发表评论

我的微信
技术支持添加二维码

我的QQ二维码
教程下载请扫二维码

版权声明：本站原创文章，于2018-12-3015:30:41，由 马找钱 发表，共 1491 字。
转载请注明：知更鸟begin主题“关于本站–微信、QQ、微博、订阅”四个图标美化教程 _ 马找钱网络营销学习网

发表评论取消回复

目前评论：8 其中：访客 7 博主 1

nuanyang 0 甘肃省武威市电信
回复 2020-02-27 下午9:37 沙发

学习一下
591754007 0 北京市移动
回复 2020-03-12 下午2:26 板凳

学习学习
xht1225 0 安徽省亳州市电信
回复 2020-03-21 下午7:50 地板

整挺好 6666
- 马找钱 博主河北省联通
  回复 2020-03-21 下午10:55 1层
  
  @xht1225 谢谢
小竹敏 0 广东省深圳市电信
回复 2020-03-30 上午12:51 4楼

学习一下
554 0 四川省泸州市联通
回复 2020-04-26 下午1:16 5楼

百度分享挂了用什么替换，求教
整挺好 6666 0 福建省莆田市联通
回复 2020-08-04 下午8:45 6楼

整挺好 6666
test 0 广东省广州市电信
回复 2020-10-06 下午5:14 7楼

学习一下