【element】修改step的图标样式

step步骤条组件，当对于流程化的事件显示很清晰，但是官网提供的样式很少，如果想使用自己icon如何实现

修改内容

1.图标的大小
2.图标内部icon的显示

具体代码

html

<el-steps :space="250" finish-status="success">
              <el-step title="吃饭" status="success"></el-step>
              <el-step title="听歌" status="wait" icon="el-icon-service"></el-step>
              <el-step title="打电话" status="finish" icon="el-icon-phone-outline"></el-step>
              <el-step title="打游戏" status="error"></el-step>
              <el-step title="睡觉" status="process" icon="el-icon-warning">
                <!-- <i icon="el-icon-loading"></i>  内部icon不好使--> 
              </el-step>
            </el-steps>

css(监听页面会发现，当没有icon时，el的样式名是is-text ，反而，样式名是is-icon, 因此先修改了外部样式，然后进行复写就可以了)

.el-step__icon.is-text {
    
    
  border-radius: 50%;
  border: 4px solid;
  width: 50px;
  height: 50px;
  border-color: inherit;
}
.el-step__icon.is-icon {
    
    
  border-radius: 50%;
  border: 4px solid;
  width: 50px;
  height: 50px;
  border-color: inherit;
}