html - 更改按钮内图标的边框颜色

Question

我正在尝试创建一个包含图标和文本的按钮。该图标是一个 SVG 图像。如何将此图标的颜色边框更改为与按钮文本相同？

我正在使用 Bootstrap，JSFiddle

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

.icon {
  background: url(https://image.flaticon.com/icons/svg/20/20061.svg) no-repeat 5px center;
  float: left;
  padding-left: 60px;
}

<div class="submitbtn">
  <input class="btn btn-outline-info btn-lg icon" id="submit" name="submit" type="submit" value="Send">
</div>

Answer 1

不要使用 SVG 作为背景，而是使用内联 SVG 代码。然后，您可以使用 CSS 中的类来定位 SVG 的填充(或描边)。

<div class="submit-btn">
  <svg class="svg-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 485.411 485.411" style="enable-background:new 0 0 485.411 485.411;" xml:space="preserve">
    <g>
      <path d="M0,81.824v321.763h485.411V81.824H0z M242.708,280.526L43.612,105.691h398.187L242.708,280.526z    M163.397,242.649L23.867,365.178V120.119L163.397,242.649z M181.482,258.533l61.22,53.762l61.22-53.762L441.924,379.72H43.487   L181.482,258.533z M322.008,242.655l139.535-122.536v245.059L322.008,242.655z" />
    </g>
  </svg>
  Send
</div>

<style>
  .submit-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.25em;
    color: #fff;
    background: #17a2b8;
    transition: 250ms ease;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 5px 15px;
  }

  .svg-outline {
    stroke: orange;
    fill: #fff;
    height: 45px;
    width: auto;
    transition: fill 250ms ease;
    margin-right: 5px;
  }

  .submit-btn:hover {
    background: #fff;
    color: #17a2b8;
    border: 1px solid #17a2b8;
  }

  .submit-btn:hover .svg-outline {
    fill: #17a2b8;
  }
</style>