更改按钮内图标的边框颜色答案

【问题标题】：Change border color of an icon inside a button更改按钮内图标的边框颜色
【发布时间】：2019-05-13 18:16:30
【问题描述】：

我正在尝试创建一个包含图标和文本的按钮。该图标是 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>

【问题讨论】：

Change svg color的可能重复
字体颜色有十六进制吗？
使用图标字体和文本来执行此操作可能比使用带有背景的输入更容易。我认为 Bootstrap 建议实际上
请看这篇文章：Change Color of SVG on Hover

标签： html css button svg bootstrap-4

【解决方案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>

【讨论】：