知更鳥begin主題“關于本站–微信、QQ、微博、訂閱”四個圖標美化教程

  • 8
  • 2,704 views
  • A+
所屬分類:知更鳥begin美化

知更鳥begin主題“關于本站–微信、QQ、微博、訂閱”四個圖標美化教程

使用知更鳥主題的小伙伴都會發現,在“關于本站”下面有四個聯系方式圖標(姑且先這么叫吧,我也不知道正規名稱是什么)。但是,主題默認的四個圖標是暗色系“灰色”的,很不美觀,與站長的要求相差甚遠。 在瀏覽別的個人博客時發現,雖然同是知更鳥主題,但是這些網站的圖標都美化了,站長甚是喜歡,苦于自己能力有限,網上也沒有找到相應的教程,就一直沒有實現圖標美化工作。但是,經過站長的不斷學習和不懈努力~自夸下 還是實現了圖標美化。后來想想,還是自己的能力有限,不會扒代碼。在此,記錄下美化的過程,留個帖子,方便日后升級主題時的再次使用。也分享給像我一樣的“白白菜鳥”?!袄哮B們”請忽略,一看而過。

美化后效果,如下圖:

知更鳥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:

目前評論:8   其中:訪客  7   博主  1

    • nuanyang nuanyang 0 來自天朝的朋友 谷歌瀏覽器 Windows 10 甘肅省武威市 電信

      學習一下

      • 591754007 591754007 0 來自天朝的朋友 谷歌瀏覽器 Windows 10 北京市 移動

        學習學習

        • xht1225 xht1225 0 來自天朝的朋友 谷歌瀏覽器 Windows 10 安徽省亳州市 電信

          整挺好 6666

            • 馬找錢 馬找錢 博主 來自天朝的朋友 谷歌瀏覽器  Android 9 MIX 2 Build/PKQ1.190118.001 河北省 聯通

              @xht1225 謝謝

            • 小竹敏 小竹敏 0 來自天朝的朋友 谷歌瀏覽器 Windows 10 廣東省深圳市 電信

              學習一下

              • 554 554 0 來自天朝的朋友 谷歌瀏覽器 Windows 10 四川省瀘州市 聯通

                百度分享掛了用什么替換,求教

                • 整挺好 6666 整挺好 6666 0 來自天朝的朋友 谷歌瀏覽器 Windows 7 福建省莆田市 聯通

                  整挺好 6666

                  • test test 0 來自天朝的朋友 谷歌瀏覽器 Windows 10 廣東省廣州市 電信

                    學習一下