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

  • 9
  • 4,183 views
  • 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
  • 我的QQ二维码
  • 教程下载请扫二维码
  • weinxin
马找钱

发表评论

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

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

    • nuanyang nuanyang 0 来自天朝的朋友 谷歌浏览器 Windows 10 甘肃省武威市 电信
      回复 2020-02-27 下午9:37  沙发

      学习一下

      • 591754007 591754007 0 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动
        回复 2020-03-12 下午2:26  板凳

        学习学习

        • xht1225 xht1225 0 来自天朝的朋友 谷歌浏览器 Windows 10 安徽省亳州市 电信
          回复 2020-03-21 下午7:50  地板

          整挺好 6666

            • 马找钱 马找钱 博主 来自天朝的朋友 谷歌浏览器 Android 9 MIX 2 Build/PKQ1.190118.001 河北省 联通
              回复 2020-03-21 下午10:55  1层

              @xht1225 谢谢

            • 小竹敏 小竹敏 0 来自天朝的朋友 谷歌浏览器 Windows 10 广东省深圳市 电信
              回复 2020-03-30 上午12:51  4楼

              学习一下

              • 554 554 0 来自天朝的朋友 谷歌浏览器 Windows 10 四川省泸州市 联通
                回复 2020-04-26 下午1:16  5楼

                百度分享挂了用什么替换，求教

                • 整挺好 6666 整挺好 6666 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省莆田市 联通
                  回复 2020-08-04 下午8:45  6楼

                  整挺好 6666

                  • test test 0 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 电信
                    回复 2020-10-06 下午5:14  7楼

                    学习一下

                    • manbo1 manbo1 0 来自天朝的朋友 QQ浏览器 Windows 10 广东省中山市 移动
                      回复 2022-05-13 下午10:00  8楼

                      学习下