如何在带有文本的按钮中添加SVG图标

Question

我有一个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图标，并将文本描述放在旁边？

- AlexFF1

---

尝试增加左填充，并为背景图像分配宽度和高度。 - Krzysztof Janiszewski

指定一个背景的尺寸。 - Temani Afif

Answer 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;
 }

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

- hoangkianh

---

很好的例子，谢谢你，我会学习这个的。谢谢 - AlexFF1

Answer 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
 } 

- Zuber

Answer 3

几种替代方案

.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

- S Morris

Answer 4

.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>

- Gautam Naik

---

为什么我们需要Bootstrap？ - patelarpan

@patelarpan，问题带有twitter-bootstrap3标签。 - Gautam Naik

实际上需要一个引导程序，这样该按钮就可以在网格内响应式地显示。 - AlexFF1