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

  • A+
所属分类:知更鸟begin美化

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

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

美化后效果,如下图:

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

  代码部署过程如下:

打开style.css,找到

  1. #feed_widget a {
  2. color: #3690cf;
  3. width: 40px;
  4. display: block;
  5. text-align: center;
  6. height: 40px;
  7. line-height: 34px;
  8. margin: 0 auto;
  9. border-radius: 4px;
  10. border: 1px solid #ddd;
  11. }

修改为:

  1. #feed_widget a {
  2. color: #999;
  3. width: 40px;
  4. display: block;
  5. text-align: center;
  6. height: 40px;
  7. line-height: 34px;
  8. margin: 0 auto;
  9. border-radius: 20px;
  10. border: 1px solid #ddd;
  11. }

再次,在以下代码

  1. #feed_widget a:hover {
  2. color: #fff;
  3. border: 1px solid #fff
  4. }

和以下代码

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

之间,添加如下代码:

此处为隐藏的内容!
发表评论并刷新,才能查看
  • 我的微信
  • 技术咨询
  • weinxin
  • 微信公众号
  • 营销技巧分享
  • weinxin
马找钱

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: