如何将svg图标添加到带有文本的按钮答案

【问题标题】：How to add svg icon to a button with a text如何将svg图标添加到带有文本的按钮
【发布时间】：2018-10-04 11:35:07
【问题描述】：

我有 svg 图标 svgIcon 的来源。我需要将此图标添加到按钮。它看起来和这个非常相似

我试过了：

css

  .btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-repeat: repeat-y;
       }

   <button class="btn"> Save</button>

但结果是这样的：

如何在按钮内添加 svg 图标并在其旁边添加文字说明？

【问题讨论】：

尝试增加左填充，并为背景图像分配宽度和高度。
指定背景尺寸

标签： html css svg twitter-bootstrap-3 icons

【解决方案1】：

我通常使用伪元素。请检查以下结果：

.btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
 }
 
 .btn:before {
   content: url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg);
   width: 20px;
   float: left;
   margin-right: 5px;
   margin-top: -2px;
 }

&lt;button class="btn"&gt;Save&lt;/button&gt;

【讨论】：

很好的例子，谢谢你，准备学习这个。谢谢

【解决方案2】：

尝试增加padding-left并设置图标的background-size。不需要background-repeat 到repeat-y，改用no-repeat。

.btn {
     border: none;
     color: grey;
     padding: 12px 16px 12px 36px; // Changed padding-left value, set as per your requirement
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-size: 25px auto; //Set as per your requirement
     background-repeat: no-repeat; // Changed
 }

【讨论】：

【解决方案3】：

.custom-btn .ico-btn {
    color: grey;
    padding: 12px 16px 12px 40px;
    background:url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg) no-repeat 13px 9px;
    background-size: 25px auto;
    background-color:#eaeaea;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="custom-btn">
  <button class="btn ico-btn">Button </button>
<div>

【讨论】：

为什么我们需要引导程序？
@patelarpan ，问题有 twitter-bootstrap3 标签
实际上需要一个引导程序，所以这个按钮可以在网格内响应

【解决方案4】：

几种选择

.btn {
 border: none;
 color: grey;
 font-size: 16px;
 cursor: pointer;
 padding: 12px 16px;
 }

 .btn:before {
 content: "";
 display: block;
 background:url("http://alexfeds.com/wpcontent/
 uploads/2018/04/save_icon.svg") no-repeat;
 width: 16px;
 height: 16px;
 float: left;
 margin: 0 6px 0 0;
 }
 .btn2 {
 border: none;
 color: grey;
 padding: 12px 16px 12px 50px;
 font-size: 16px;
 cursor: pointer;
 background-image: url("http://alexfeds.com/wp- 
 content/uploads/2018/04/save_icon.svg");
 background-repeat: repeat-y;
 }

 a {
 text-decoration: none;
 color: #515151;
 display: inline-block;
 background-color: #dfdfdf;
 padding: 12px 16px;
 }
 a:before {
 font-family: FontAwesome;
 content: "\f15b";
 display: inline-block;
 padding-right: 10px;
 vertical-align: middle;
 font-size: 20px;
 }

演示 - jsfiddle

【讨论】：