diff --git a/assets/index.less b/assets/index.less
index 6fb28966..0ca6faaa 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -1,5 +1,13 @@
 @menuPrefixCls: rc-menu;
 
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
+  src: url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('http://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .@{menuPrefixCls} {
   outline: none;
   margin-bottom: 0;
@@ -142,6 +150,32 @@
     & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
       padding: 12px 8px 12px 24px;
     }
+    .@{menuPrefixCls}-submenu-arrow {
+      display: inline-block;
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      vertical-align: baseline;
+      text-align: center;
+      text-transform: none;
+      text-rendering: auto;
+      position: absolute;
+      right: 16px;
+      line-height: 1.5em;
+      &:before {
+        content: "\f0da";
+      }
+    }
+  }
+  &-inline {
+    .@{menuPrefixCls}-submenu-arrow {
+      transform: rotate(90deg);
+      transition: transform .3s;
+    }
+    & .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
+      .@{menuPrefixCls}-submenu-arrow {
+        transform: rotate(-90deg);
+      }
+    }
   }
 
   &-vertical&-sub {
@@ -168,6 +202,7 @@
   }
 
   &-open {
+
     &-slide-up-enter, &-slide-up-appear {
       .effect();
       opacity: 0;
diff --git a/examples/keyPath.js b/examples/keyPath.js
index 67027d9e..fa76a1bc 100644
--- a/examples/keyPath.js
+++ b/examples/keyPath.js
@@ -4,11 +4,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
 import createReactClass from 'create-react-class';
-React.createClass = createReactClass;
 
 import 'rc-menu/assets/index.less';
 
-const Test = React.createClass({
+const Test = createReactClass({
   onClick(info) {
     console.log('click ', info);
   },
diff --git a/examples/multiple.js b/examples/multiple.js
index ea88a701..f1138726 100644
--- a/examples/multiple.js
+++ b/examples/multiple.js
@@ -14,17 +14,12 @@ function handleDeselect(info) {
   console.log('deselect ', info);
 }
 
-const titleRight = (<span>sub menu
-  <i className="fa fa-caret-right pull-right"></i>
-</span>);
+const titleRight = (<span>sub menu</span>);
 const titleRight1 = (<span>sub menu 1
-  <i className="fa fa-caret-right pull-right"></i>
 </span>);
 const titleRight2 = (<span>sub menu 2
-  <i className="fa fa-caret-right pull-right"></i>
 </span>);
 const titleRight3 = (<span>sub menu 3
-  <i className="fa fa-caret-right pull-right"></i>
 </span>);
 
 function render(container) {
@@ -64,7 +59,6 @@ function render(container) {
     </Menu>
   );
   ReactDOM.render(<div>
-    <link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
     <h2>multiple selectable menu</h2>
 
     <p>
diff --git a/examples/openKeys.js b/examples/openKeys.js
index e163a056..13115bd4 100644
--- a/examples/openKeys.js
+++ b/examples/openKeys.js
@@ -4,11 +4,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
 import createReactClass from 'create-react-class';
-React.createClass = createReactClass;
 
 import 'rc-menu/assets/index.less';
 
-const Test = React.createClass({
+const Test = createReactClass({
   getInitialState() {
     return {
       openKeys: [],
diff --git a/examples/scrollable.js b/examples/scrollable.js
index 704d9ab3..5dcffc46 100644
--- a/examples/scrollable.js
+++ b/examples/scrollable.js
@@ -3,8 +3,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Menu, { Item as MenuItem } from 'rc-menu';
-import createReactClass from 'create-react-class';
-React.createClass = createReactClass;
 
 import 'rc-menu/assets/index.less';
 
@@ -19,7 +17,6 @@ const menuStyle = {
   overflow: 'auto',
 };
 ReactDOM.render(<div>
-  <link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
   <h2>keyboard scrollable menu</h2>
   <Menu style={menuStyle}>{children}</Menu>
 </div>, document.getElementById('__react-content'));
diff --git a/examples/selectedKeys.js b/examples/selectedKeys.js
index 6707c35e..ba09a076 100644
--- a/examples/selectedKeys.js
+++ b/examples/selectedKeys.js
@@ -4,10 +4,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
 import createReactClass from 'create-react-class';
-React.createClass = createReactClass;
+
 import 'rc-menu/assets/index.less';
 
-const Test = React.createClass({
+const Test = createReactClass({
   getInitialState() {
     return {
       destroyed: false,
@@ -109,7 +109,6 @@ const Test = React.createClass({
     const openKeys = this.state.openKeys;
 
     return (<div>
-      <link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
       <h2>multiple selectable menu</h2>
 
       <p>
diff --git a/examples/single.js b/examples/single.js
index 47494318..d635b9b9 100644
--- a/examples/single.js
+++ b/examples/single.js
@@ -13,18 +13,10 @@ function handleClick(info) {
   console.log('click ', info);
 }
 
-const titleRight = (<span>sub menu
-  <i className="fa fa-caret-right pull-right"></i>
-</span>);
-const titleRight1 = (<span>sub menu 1
-  <i className="fa fa-caret-right pull-right"></i>
-</span>);
-const titleRight2 = (<span>sub menu 2
-  <i className="fa fa-caret-right pull-right"></i>
-</span>);
-const titleRight3 = (<span>sub menu 3
-  <i className="fa fa-caret-right pull-right"></i>
-</span>);
+const titleRight = (<span>sub menu</span>);
+const titleRight1 = (<span>sub menu 1</span>);
+const titleRight2 = (<span>sub menu 2</span>);
+const titleRight3 = (<span>sub menu 3</span>);
 
 function render(container) {
   function destroy() {
@@ -64,7 +56,6 @@ function render(container) {
     </Menu>
   );
   ReactDOM.render(<div>
-    <link href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
     <h2>single selectable menu</h2>
 
     <p>
diff --git a/src/SubMenu.jsx b/src/SubMenu.jsx
index 7dcf0c9d..f7257441 100644
--- a/src/SubMenu.jsx
+++ b/src/SubMenu.jsx
@@ -425,6 +425,7 @@ const SubMenu = createReactClass({
           aria-haspopup="true"
         >
           {props.title}
+          <i className={`${prefixCls}-arrow`} />
         </div>
         {this.renderChildren(props.children)}
       </li>
diff --git a/tests/__snapshots__/Menu.spec.js.snap b/tests/__snapshots__/Menu.spec.js.snap
index a642b347..73860832 100644
--- a/tests/__snapshots__/Menu.spec.js.snap
+++ b/tests/__snapshots__/Menu.spec.js.snap
@@ -65,6 +65,8 @@ exports[`Menu render renders horizontal menu correctly 1`] = `
       aria-owns="item_3$Menu"
       class="rc-menu-submenu-title">
       submenu
+      <i
+        class="rc-menu-submenu-arrow" />
     </div>
   </li>
 </ul>
@@ -137,6 +139,8 @@ exports[`Menu render renders inline menu correctly 1`] = `
       aria-owns="item_3$Menu"
       class="rc-menu-submenu-title">
       submenu
+      <i
+        class="rc-menu-submenu-arrow" />
     </div>
   </li>
 </ul>
@@ -209,6 +213,8 @@ exports[`Menu render renders vertical menu correctly 1`] = `
       aria-owns="item_3$Menu"
       class="rc-menu-submenu-title">
       submenu
+      <i
+        class="rc-menu-submenu-arrow" />
     </div>
   </li>
 </ul>