Element: use `fa` in input icon

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
    <el-input placeholder="Enter password" icon=" fa fa-address-card-o"></el-input>
    <i class="fa fa-user-circle fa-5x"></i>
  </template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");
@import url("//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css");

.el-input> .fa{
  font:14px/1 FontAwesome !important;
}

Babel + JSX

var Main = {
    data() {
      return {
				
      }
    },
    methods: {
      togglePasswordVisibility () {
        this.type = this.type ==  "password" ? "text":"password";
      }      
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')