图标按钮-代码广场-One Line

oneline
代码

 <p class="ol-layout-g g-3 gap-10">
  <button class="ol-btn ol-btn-o_default">
    <i class="fas fa-check"></i>
    default
  </button>
  <button class="ol-btn ol-btn-o_primary"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" class="ol-btn__icon">primary</button>
  <button class="ol-btn ol-btn-o_success"><i class="fas fa-check ol-btn__icon"></i> success</button>
  <button class="ol-btn ol-btn-o_warning"><i class="fas fa-check ol-btn__icon"></i>warning</button>
  <button class="ol-btn ol-btn-o_danger"><i class="fas fa-trash-alt ol-btn__icon"></i> danger</button>
  <button class="ol-btn ol-btn-o_dark"><i class="fas fa-check ol-btn__icon"></i>dark</button>
  <button class="ol-btn ol-btn-o_light"><i class="fas fa-check ol-btn__icon"></i>light</button>
  <button class="ol-btn ol-btn-o_info"><i class="fas fa-check ol-btn__icon"></i>info</button>
  <button class="ol-btn ol-btn_pink"><i class="fas fa-check ol-btn__icon"></i>pink</button>
  <button class="ol-btn ol-btn_purple"><i class="fas fa-check ol-btn__icon"></i>purple</button>
  <!-- <button class="ol-btn ol-btn-o_white">white</button> -->
  <button class="ol-btn ol-btn_muted"><i class="fas fa-check ol-btn__icon"></i>muted</button>
  <button class="ol-btn ol-btn_link"><i class="fas fa-check ol-btn__icon"></i>link</button>
</p>
预览

图标按钮 @oneline/style 前端样式 oneline