diff --git a/components/iconfont/index.md b/components/iconfont/index.md
index b1d044f3a2..98728d7ee5 100644
--- a/components/iconfont/index.md
+++ b/components/iconfont/index.md
@@ -17,7 +17,7 @@
 
 ## 图标列表
 
-### 一：方向性图标
+### 一. 方向性图标
 <ul class="row anticons-list fn-clear">
 	<li>
 		<span class="anticon anticon-step-backward"></span>
@@ -125,7 +125,7 @@
 	</li>
 </ul>
 
-### 二：提示建议性图标
+### 二. 提示建议性图标
 
 <ul class="anticons-list fn-clear">
 	<li>
@@ -234,7 +234,7 @@
 	</li>
 </ul>
 
-### 三：网站通用图标
+### 三. 网站通用图标
 
 <ul class="anticons-list fn-clear">
 	<li>
@@ -482,9 +482,10 @@ ul.anticons-list {
 }
 ul.anticons-list li {
   float: left;
-  margin: 5px;
+  margin: 10px 5px;
   padding-bottom: 10px;
-  width: 160px;
+  width: 150px;
+  height: 120px;
   text-align: center;
   list-style: none;
   cursor: pointer;
@@ -493,13 +494,13 @@ ul.anticons-list li {
   transition: all 0.2s ease;
 }
 ul.anticons-list li:hover {
-  background-color: #6EB4E0;
+  background-color: #4BB8FF;
   color: #fff;
   border-radius: 4px;
 }
 .anticon {
-  font-size: 32px;
-  line-height: 64px;
+  font-size: 24px;
+  margin: 18px 0 16px;
 }
 .anticon-class {
   display: block;
diff --git a/static/script.js b/static/script.js
index ff3fd6bfbc..786f56f43a 100644
--- a/static/script.js
+++ b/static/script.js
@@ -22,10 +22,16 @@ $(function() {
 
   $('.code-boxes').on('click', '.collapse', function() {
     var highlightBox = $(this).parent().parent().find('.highlight');
+    var codeVisible = highlightBox.is(':visible');
     highlightBox.animate({
-      height: highlightBox.is(':visible') ? 'hide' : 'show',
-      opacity: highlightBox.is(':visible') ? 0 : 1
+      height: codeVisible ? 'hide' : 'show',
+      opacity: codeVisible ? 0 : 1
     }, 150);
+    if (codeVisible) {
+      $(this).parent().parent().removeClass('expand');
+    } else {
+      $(this).parent().parent().addClass('expand');
+    }
   });
 
   var navFunc = {
diff --git a/static/style.css b/static/style.css
index 40a237118e..40edb7fdb4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -248,6 +248,7 @@ header {
 
 .nav ul li.current a {
   color: #71B5DE;
+  font-weight: bold;
 }
 
 .nav ul li a:hover,
@@ -451,7 +452,6 @@ footer ul li > a {
 
 .aside-container li>ul {
   display: none;
-  background: #f4f4f4;
 }
 
 .aside-container li>ul li {
@@ -516,6 +516,10 @@ footer ul li > a {
   font-size: 14px;
 }
 
+.markdown h1 {
+  color: #5C6B77;
+}
+
 .markdown h2,
 .markdown h3,
 .markdown h4,
@@ -539,7 +543,7 @@ footer ul li > a {
 .markdown pre code {
   background: rgba(0, 0, 0, 0.03);
   border: none;
-  border-radius: 0;
+  border-radius: 6px;
   padding: 12px 20px;
 }
 
@@ -1664,8 +1668,7 @@ footer ul li > a {
   position: absolute;
   top: -14px;
   padding: 1px 1.1em;
-  color: #888;
-  font-weight: bold;
+  color: #777;
   border-radius: 6px;
   background: #fafafa;
   box-shadow: 0 -1.2px 0 #e9e9e9;
@@ -1678,7 +1681,7 @@ footer ul li > a {
   vertical-align: middle;
   line-height: 22px;
   position: relative;
-  margin-right: 6px;
+  margin-right: 8px;
   top: -1px;
   color: #ccc;
 }
@@ -1696,19 +1699,29 @@ footer ul li > a {
   border: 1px solid #999;
   width: 20px;
   height: 20px;
-  line-height: 17px;
+  line-height: 20px;
   font-size: 14px;
-  text-indent: 3px;
   border-radius: 100%;
   opacity: 0.5;
-  transform: rotate(90deg);
   margin-top: -10px;
+  text-align: center;
 }
 
 .code-box .collapse:hover {
   opacity: 1;
 }
 
+.code-box .collapse:before {
+  transform: rotate(90deg);
+  transform-origin: 50% 50%;
+  display: inline-block;
+  transition: transform 0.3s ease;
+}
+
+.code-box.expand .collapse:before {
+  transform: rotate(270deg);
+}
+
 .code-box .highlight {
   overflow: hidden;
   display: none;
@@ -1776,3 +1789,4 @@ a.entry-link:hover .icon-lego {
   -webkit-animation: rotateCircle 0.5s 1 ease-in-out;
   animation: rotateCircle 0.5s 1 ease-in-out;
 }
+  transform: rotate();