filter:brightness()实现按钮图标变色实例页面

展示

代码

• HTML：

  <a href="##" class="ui-button">
      <i class="icon icon-delete"></i>删除
  </a>
  <a href="##" class="ui-button ui-button-primary">
      <i class="icon icon-delete"></i>删除
  </a>

• CSS：

  .icon-delete {
      display: inline-block;
      width: 18px; height: 18px;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath ...fill='%234c5161'/%3E%3C/svg%3E");
      background-size: 100% 100%;
      vertical-align: -4px;
      margin-right: 5px;
  }
  .ui-button-primary .icon {
      filter: brightness(100);
  }