社群按鈕小工具

共计 1350 个字符，预计需要花费 4 分钟才能阅读完成。

很多部落客習慣透過 ICON 的方式來連結到自己的粉絲專頁或者是相關的社群網站 但偏偏這個主題原生沒有這個功能 只好自己手刻一個 其實手刻也不難 方法如下

• 打開主題的 sidebar.php 加入下述程式碼即可

  <div class="widget">
  	<h3>
  		<a href="https://www.facebook.com/yosheng0323">
  			<img class="scicon" title="Facebook" alt="Facebook" src="<?php bloginfo('template_directory'); ?>/images/Facebook.png" />
  		</a>
  		<a href="https://tw.linkedin.com/in/risen-zhang-020962102">
  			<img class="scicon" title="LinkedIn" alt="LinkedIn" src="<?php bloginfo('template_directory'); ?>/images/LinkedIn.png" />
  		</a>
  		<a href="https://github.com/RisenZhang">
  			<img class="scicon" title="Github" alt="Github" src="<?php bloginfo('template_directory'); ?>/images/Github.png"/>
  		</a>
  		<a href="<?php bloginfo('rss2_url'); ?>">
  			<img class="scicon" title="Rss" alt="RSS 訂閱" src="<?php bloginfo('template_directory'); ?>/images/Rss.png" />
  		</a>
  	</h3>
  </div>

然後記得去找自己喜歡的 Icon 推薦 https://www.iconfinder.com/ 裡面很多免費可以拿來使用

記得將自己下載回來的 Icon 放進主題的資料夾中 我是建立 imges 資料夾 統一放在裡面進行連結

• 最後加入 CSS 調整 ICON 圖片大小

  .scicon {
      width: 40px;
      height: 40px;
      padding: 8px;
  }

• 如果要有滑鼠移過去的旋轉效果則添加下述程式碼

  .scicon {
      width: 40px;
      height: 40px;
      padding: 8px;
      -webkit-transition: all 0.5s ease 0s;
      -moz-transition: all 0.5s ease 0s;
      -o-transition: all 0.5s ease 0s;
      -ms-transition: all 0.5s ease 0s;
      transition: all 0.5s ease 0s;
      cursor: pointer;
  }
  
  .scicon:hover {
      width: 40px;
      height: 40px;
      padding: 8px;
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
  }