element饿了么按钮图标大小踩坑

话不多说直接上代码~~~~~~~~~

<template>
  <div id="app">
    <el-button icon="el-icon-s-help"></el-button>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {
      text: "hello"
    };
  }
};
</script>
 
<style lang="less" scoped>
// 使用了字体图标，直接在父元素上面加font-size不起作用
// 用到 less 预编译的深度作用选择器  /deep/
// 当前 原生的是  >>>
.el-button {
  width: 40px;
  height: 40px;
  padding: 0;
  /deep/ i {
    font-size: 30px;
  }
}
// 写成原生的应该是   .el-button >>> i { ... }
</style>