Icon: add docs on third-party icon integration

examples/docs/en-US/icon.md

@@ -12,7 +12,6 @@
 
 <style>
   .demo-icon .source > i {
-    font-size: 24px;
     color: #8492a6;
     margin: 0 20px;
     font-size: 1.5em;
@@ -94,4 +93,35 @@ Just assign the class name to `el-icon-iconName`.
       {{'el-icon-' + name}}
     </span>
   </li>
-</ul>
\ No newline at end of file
+</ul>
+
+### Third-party icons
+
+Some of Element's components has an `icon` attribute, e.g. Input. If you want to use a third-party icon in the `icon` attribute, here's what you need to do:
+<p>
+  <span>1.</span> Modify the class name prefix of the third-party library
+</p>
+
+Please read third-party icon library documentation on how to do it. For example, if you're using [iconfont.cn](http://iconfont.cn/), you can find prefix editor in the "Edit Project" dialog. If you're using [Font Awesome](http://fontawesome.io/), you can refer to [this demo](https://github.com/ElementUI/element-font-awesome).
+
+<p>
+  <span>2.</span> Add some CSS:
+</p>
+
+```CSS
+[class^="el-icon-my"], [class*=" el-icon-my"] {
+font-family:"your-font-family" !important;
+
+/* The following is based on original CSS rules of third-party library */
+font-size: inherit;
+font-style:normal;
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+}
+```
+
+Now you can use them as you do with Element built-in icons. For example, in el-input:
+
+```html
+<el-input icon="my-xxx" />
+```
\ No newline at end of file

examples/docs/zh-CN/icon.md

@@ -11,7 +11,6 @@
 </script>
 <style>
   .demo-icon .source > i {
-    font-size: 24px;
     color: #8492a6;
     margin: 0 20px;
     font-size: 1.5em;
@@ -92,3 +91,33 @@
     </span>
   </li>
 </ul>
+
+### 第三方图标库
+
+Element 的一些组件提供了 `icon` 属性（如 Input），如果希望传入第三方图标库中的图标，需要进行如下操作：
+<p>
+  <span>1.</span> 修改第三方图标库的前缀（见下方说明）
+</p>
+<p>
+  <span>2.</span> 添加以下 CSS：
+</p>
+
+```CSS
+[class^="el-icon-my"], [class*=" el-icon-my"] {
+  font-family:"your-font-family" !important;
+  
+  /* 以下内容参照第三方图标库本身的规则 */
+  font-size: inherit;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+之后就可以像使用 Element 内置图标一样使用第三方图标。比如在 el-input 中：
+
+```html
+<el-input icon="my-xxx" />
+```
+
+关于如何修改第三方图标库的前缀，请参阅第三方图标库的文档。比如，如果使用 [iconfont.cn](http://iconfont.cn/)，则可以在「编辑项目」弹框中修改；如果使用 [Font Awesome](http://fontawesome.io/)，可以参考[这个示例](https://github.com/ElementUI/element-font-awesome)。
\ No newline at end of file